@crtobiasdelsud/portal-ui 1.1.1 → 1.1.2

package/package.json

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

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,4 +1,4 @@
-import { stripHtml } from '../../../../../utils/stripHtml'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 
 export default function Amp({ article, rank }) {
   const { titulo, volanta, copete, imagen, slug } = article
@@ -12,15 +12,9 @@ export default function Amp({ article, rank }) {
         </a>
       )}
       <div className="card-cabezal__body">
-        {volanta && <span className="card-cabezal__volanta">{volanta}.</span>}
-        {titulo && (
-          // El título es un heading semántico; el <a> conserva la clase y el estilo de link.
-          // margin:0 inline anula el margin por defecto del <h3> (AMP no permite <style> extra).
-          <h3 className="card-cabezal__titulo-heading" style={{ margin: 0 }}>
-            <a href={href} className="card-cabezal__titulo">{titulo}</a>
-          </h3>
-        )}
-        {copete && <div className="card-cabezal__copete">{stripHtml(copete)}</div>}
+        {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>
       {rank != null && <span className="card-cabezal__rank">{rank}</span>}
     </article>

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

@@ -3,6 +3,7 @@ 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 }) {
 
@@ -27,7 +28,7 @@ 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>
         {displayName && <span className={styles.autor}>Por {displayName}</span>}

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

@@ -3,6 +3,7 @@ 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 }) {
 
@@ -26,7 +27,7 @@ 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>
         {displayName && <span className={styles.autor}>Por {displayName}</span>}

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

@@ -3,6 +3,7 @@ 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 }) {
 
@@ -27,7 +28,7 @@ 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>
         {displayName && <span className={styles.autor}>Por {displayName}</span>}

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

@@ -4,6 +4,7 @@ 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 }) {
 
@@ -27,7 +28,7 @@ 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: sanitizeInlineHtml(copete) }} />}

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

@@ -4,6 +4,7 @@ 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 }) {
 
@@ -27,7 +28,7 @@ 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: sanitizeInlineHtml(copete) }} />}

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

@@ -3,6 +3,7 @@ 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 }) {
 
@@ -26,7 +27,7 @@ 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>
         {displayName && <span className={styles.autor}>Por {displayName}</span>}

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/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,6 +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.
@@ -40,7 +41,7 @@ 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>
             {displayName && (

package/src/components/Cards/ArticleCard/ArticleCard.jsx

@@ -7,6 +7,7 @@ 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"
 
 function buildTooltip(article, authorName) {
   const author = authorName
@@ -76,10 +77,12 @@ export default function ArticleCard({
             }`}
           >
             <p className={styles.headline}>
-              <span className={styles.category}>
-                {article.volanta}.
-              </span>
-              {' '}
+              {article.volanta && (
+                <span className={styles.category}>
+                  {volantaWithStop(article.volanta)}
+                </span>
+              )}
+              {article.volanta && ' '}
               {article.titulo}
             </p>
 

package/src/components/Cards/Bajada/variants/V1/V1.jsx

@@ -1,5 +1,6 @@
 import shared from '../../Bajada.module.scss'
 import { stripHtml } from '../../../../../utils/stripHtml'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 import s from './V1.module.scss'
 
 export default function V1({ isAmp, inlineStyle, volanta, title, copete, authorId, vDesktop }) {
@@ -11,7 +12,7 @@ export default function V1({ isAmp, inlineStyle, volanta, title, copete, authorI
   return (
     <div className={className} style={inlineStyle}>
       <h2 className={isAmp ? 'bajada__headline' : shared.headline}>
-        <span className={isAmp ? 'bajada__volanta' : shared.volanta}>{volanta}. </span>
+        <span className={isAmp ? 'bajada__volanta' : shared.volanta}>{volantaWithStop(volanta)} </span>
         {title}
       </h2>
       {copete && <p className={isAmp ? 'bajada__copete' : shared.copete}>{stripHtml(copete)}</p>}

package/src/components/Cards/Bajada/variants/V2/V2.jsx

@@ -1,4 +1,5 @@
 import shared from '../../Bajada.module.scss'
+import { volantaWithStop } from '../../../../../utils/volanta.js'
 import s from './V2.module.scss'
 
 export default function V2({ isAmp, inlineStyle, volanta, title, authorId, vDesktop }) {
@@ -10,7 +11,7 @@ export default function V2({ isAmp, inlineStyle, volanta, title, authorId, vDesk
   return (
     <div className={className} style={inlineStyle}>
       <h2 className={isAmp ? 'bajada__headline' : shared.headline}>
-        <span className={isAmp ? 'bajada__volanta' : shared.volanta}>{volanta}. </span>
+        <span className={isAmp ? 'bajada__volanta' : shared.volanta}>{volantaWithStop(volanta)} </span>
         {title}
       </h2>
       {authorId && <span className={isAmp ? 'bajada__autor' : shared.autor}>Por {authorId}</span>}

package/src/components/Carousel/Carousel.jsx

@@ -1,27 +1,33 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useRef, useCallback, useEffect } from 'react'
 import AspectImage from '../UI/AspectImage/AspectImage.jsx'
 import styles from './Carousel.module.scss'
 
+const RATIOS = { '16:9': '16/9', '4:3': '4/3' }
+
+// Una sola "copia fantasma" a cada lado alcanza cuando se ve 1 slide a la vez.
+// Mismo principio que Cabezal/Carrusel: al llegar al clon teleportamos al real
+// equivalente sin que el usuario lo perciba.
+const CLONE_COUNT = 1
+
 /**
- * Carrusel de imágenes con navegación manual (flechas + puntos).
+ * Carrusel de imágenes con scroll-snap nativo + flechas + puntos.
  *
- * La primera imagen del array es la principal. Cada slide muestra la imagen
- * en aspecto 16:9 y, si tiene, su epígrafe como franja negra inferior.
+ * El track usa `overflow-x: scroll` con `scroll-snap-type: x mandatory`, lo
+ * que da swipe nativo en iOS/Android sin librerías externas. Las flechas y
+ * los puntos disparan `scrollBy` y `setScrollLeft` sobre ese mismo track.
  *
  * @param {object} props
  * @param {{ url: string, alt?: string, epigrafe?: string, variants?: object }[]} props.images
  * @param {object}  [props.focalPoint]   - { x, y, zoom } aplicado a todas.
  * @param {string}  [props.aspect]       - '16:9' | '4:3'.
- * @param {string}  [props.sizes]        - hint de tamaño para el srcset de variantes.
- * @param {boolean} [props.fill]         - true → ocupa el contenedor posicionado
- *                                         padre (uso en el hero). false → genera
- *                                         su propia caja con aspect-ratio.
- * @param {boolean} [props.showEpigrafe] - false → oculta la franja de epígrafe.
+ * @param {string}  [props.sizes]        - hint de tamaño para el srcset.
+ * @param {boolean} [props.fill]         - true → ocupa el contenedor padre
+ *                                         posicionado (uso en el hero).
+ * @param {boolean} [props.showEpigrafe] - false → oculta el epígrafe.
  * @param {'bottom'|'top'} [props.dotsPosition]
- * @param {boolean} [props.priority] - true → la primera imagen carga con
- *        prioridad alta (LCP). El resto carga al navegar a su slide.
+ * @param {boolean} [props.priority]     - true → la primera imagen es LCP.
  */
 export default function Carousel({
   images = [],
@@ -33,74 +39,246 @@ export default function Carousel({
   priority = false,
   sizes,
 }) {
-  const [index, setIndex] = useState(0)
+  const total = images.length
+  const [activeIndex, setActiveIndex] = useState(0)
+  const trackRef = useRef(null)
+  const isJumping = useRef(false)
 
-  if (!images.length) return null
+  const getRealIndex = useCallback((childIdx) => {
+    if (!total) return 0
+    const raw = childIdx - CLONE_COUNT
+    return ((raw % total) + total) % total
+  }, [total])
 
-  const total = images.length
-  const safeIndex = index < total ? index : 0
-  const current = images[safeIndex]
-  const go = (delta) => setIndex((i) => (((i + delta) % total) + total) % total)
+  const getSnappedIndex = (track) => {
+    const trackLeft = track.getBoundingClientRect().left
+    let best = 0
+    let bestDist = Infinity
+    Array.from(track.children).forEach((child, i) => {
+      const dist = Math.abs(child.getBoundingClientRect().left - trackLeft)
+      if (dist < bestDist) { bestDist = dist; best = i }
+    })
+    return best
+  }
+
+  // Teleportar de un clon al real equivalente, sin que el usuario lo note.
+  // En WebKit (iOS) el snap mandatory y el scroll-behavior:smooth pelean con
+  // scrollBy({behavior:'instant'}) → glitch. Los apagamos durante el salto.
+  const wrapIfNeeded = useCallback(() => {
+    if (isJumping.current) return
+    const track = trackRef.current
+    if (!track || total < 2) return
+
+    const snapped = getSnappedIndex(track)
+    let target = null
+    if (snapped < CLONE_COUNT) {
+      target = track.children[snapped + total]
+    } else if (snapped >= CLONE_COUNT + total) {
+      target = track.children[snapped - total]
+    }
+    if (!target) return
+
+    const delta =
+      target.getBoundingClientRect().left -
+      track.children[snapped].getBoundingClientRect().left
+
+    isJumping.current = true
+    const prevSnap = track.style.scrollSnapType
+    const prevBehavior = track.style.scrollBehavior
+    track.style.scrollSnapType = 'none'
+    track.style.scrollBehavior = 'auto'
+    track.scrollLeft += delta
+    void track.offsetWidth
+    track.style.scrollSnapType = prevSnap
+    void track.offsetWidth
+    track.style.scrollBehavior = prevBehavior
+    requestAnimationFrame(() => { isJumping.current = false })
+  }, [total])
+
+  // Al montar: posicionarse en el primer slide real (saltar el leading clone).
+  useEffect(() => {
+    if (total < 2) return
+    requestAnimationFrame(() => {
+      const track = trackRef.current
+      const firstReal = track?.children[CLONE_COUNT]
+      if (!firstReal) return
+      const delta =
+        firstReal.getBoundingClientRect().left -
+        track.getBoundingClientRect().left
+      const prevBehavior = track.style.scrollBehavior
+      track.style.scrollBehavior = 'auto'
+      track.scrollLeft += delta
+      track.style.scrollBehavior = prevBehavior
+    })
+  }, [total])
+
+  // scrollend dispara el wrap recién cuando el scroll se asienta. Fallback con
+  // debounce para navegadores que aún no lo implementan.
+  useEffect(() => {
+    if (total < 2) return
+    const track = trackRef.current
+    if (!track) return
+
+    if ('onscrollend' in HTMLElement.prototype) {
+      track.addEventListener('scrollend', wrapIfNeeded)
+      return () => track.removeEventListener('scrollend', wrapIfNeeded)
+    }
+
+    let timer
+    const onScroll = () => {
+      clearTimeout(timer)
+      timer = setTimeout(wrapIfNeeded, 150)
+    }
+    track.addEventListener('scroll', onScroll)
+    return () => {
+      track.removeEventListener('scroll', onScroll)
+      clearTimeout(timer)
+    }
+  }, [wrapIfNeeded, total])
+
+  const handleScroll = useCallback(() => {
+    if (isJumping.current) return
+    const track = trackRef.current
+    if (!track) return
+    setActiveIndex(getRealIndex(getSnappedIndex(track)))
+  }, [getRealIndex])
+
+  const getSlideWidth = () => {
+    const s = trackRef.current?.children[0]
+    return s ? s.getBoundingClientRect().width : 0
+  }
+
+  const prev = () => {
+    const sw = getSlideWidth()
+    trackRef.current?.scrollBy({ left: -sw, behavior: 'smooth' })
+  }
+  const next = () => {
+    const sw = getSlideWidth()
+    trackRef.current?.scrollBy({ left: sw, behavior: 'smooth' })
+  }
+  const goToIndex = (idx) => {
+    const track = trackRef.current
+    if (!track) return
+    const target = track.children[CLONE_COUNT + idx]
+    if (!target) return
+    const delta =
+      target.getBoundingClientRect().left -
+      track.getBoundingClientRect().left
+    track.scrollBy({ left: delta, behavior: 'smooth' })
+    setActiveIndex(idx)
+  }
+
+  if (!total) return null
 
   const rootClass = fill ? `${styles.carousel} ${styles.fill}` : styles.carousel
   const dotsClass = dotsPosition === 'top'
     ? `${styles.dots} ${styles.dotsTop}`
     : styles.dots
 
-  return (
-    <div className={rootClass}>
-      <div className={styles.viewport}>
-        <AspectImage
-          src={current.url}
-          alt={current.alt ?? ''}
-          aspect={aspect}
-          fill={fill}
-          focalPoint={focalPoint}
-          variants={current.variants ?? null}
-          sizes={sizes}
-          priority={priority && safeIndex === 0}
-        />
-        {showEpigrafe && current.epigrafe && (
-          <p className={styles.epigrafe}>{current.epigrafe}</p>
-        )}
+  // En modo fill el padre define el alto. Sin fill, el viewport pone su propio
+  // aspect-ratio (cada slide hereda height: 100%).
+  const viewportStyle = fill
+    ? undefined
+    : { aspectRatio: RATIOS[aspect] ?? RATIOS['16:9'] }
+
+  // Caso 1 imagen: sin scroll, sin clones, sin controles. Salida temprana.
+  if (total === 1) {
+    const only = images[0]
+    return (
+      <div className={rootClass}>
+        <div className={styles.viewport} style={viewportStyle}>
+          <AspectImage
+            src={only.url}
+            alt={only.alt ?? ''}
+            aspect={aspect}
+            fill
+            focalPoint={focalPoint}
+            variants={only.variants ?? null}
+            sizes={sizes}
+            priority={priority}
+          />
+          {showEpigrafe && only.epigrafe && (
+            <p className={styles.epigrafe}>{only.epigrafe}</p>
+          )}
+        </div>
       </div>
+    )
+  }
+
+  const leadClones = images.slice(-CLONE_COUNT)
+  const tailClones = images.slice(0, CLONE_COUNT)
 
-      {total > 1 && (
-        <>
-          <button
-            type="button"
-            className={`${styles.arrow} ${styles.arrowPrev}`}
-            onClick={() => go(-1)}
-            aria-label="Imagen anterior"
-          >
-            <span aria-hidden="true">&lsaquo;</span>
-          </button>
-          <button
-            type="button"
-            className={`${styles.arrow} ${styles.arrowNext}`}
-            onClick={() => go(1)}
-            aria-label="Imagen siguiente"
-          >
-            <span aria-hidden="true">&rsaquo;</span>
-          </button>
-          <div className={dotsClass}>
-            {images.map((_, i) => (
-              <button
-                key={i}
-                type="button"
-                className={
-                  i === safeIndex
-                    ? `${styles.dot} ${styles.dotActive}`
-                    : styles.dot
-                }
-                onClick={() => setIndex(i)}
-                aria-label={`Ir a la imagen ${i + 1}`}
-                aria-current={i === safeIndex}
-              />
-            ))}
-          </div>
-        </>
+  const renderSlide = (img, key, isPriority, isClone) => (
+    <div
+      key={key}
+      className={styles.slide}
+      aria-hidden={isClone ? 'true' : undefined}
+    >
+      <AspectImage
+        src={img.url}
+        alt={img.alt ?? ''}
+        aspect={aspect}
+        fill
+        focalPoint={focalPoint}
+        variants={img.variants ?? null}
+        sizes={sizes}
+        priority={isPriority}
+      />
+      {showEpigrafe && img.epigrafe && (
+        <p className={styles.epigrafe}>{img.epigrafe}</p>
       )}
     </div>
   )
+
+  return (
+    <div className={rootClass}>
+      <div className={styles.viewport} style={viewportStyle}>
+        <div className={styles.track} ref={trackRef} onScroll={handleScroll}>
+          {leadClones.map((img, i) =>
+            renderSlide(img, `clone-start-${i}`, false, true),
+          )}
+          {images.map((img, i) =>
+            renderSlide(img, img.url ?? `slide-${i}`, priority && i === 0, false),
+          )}
+          {tailClones.map((img, i) =>
+            renderSlide(img, `clone-end-${i}`, false, true),
+          )}
+        </div>
+
+        <button
+          type="button"
+          className={`${styles.arrow} ${styles.arrowPrev}`}
+          onClick={prev}
+          aria-label="Imagen anterior"
+        >
+          <span aria-hidden="true">&lsaquo;</span>
+        </button>
+        <button
+          type="button"
+          className={`${styles.arrow} ${styles.arrowNext}`}
+          onClick={next}
+          aria-label="Imagen siguiente"
+        >
+          <span aria-hidden="true">&rsaquo;</span>
+        </button>
+
+        <div className={dotsClass}>
+          {images.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              className={
+                i === activeIndex
+                  ? `${styles.dot} ${styles.dotActive}`
+                  : styles.dot
+              }
+              onClick={() => goToIndex(i)}
+              aria-label={`Ir a la imagen ${i + 1}`}
+              aria-current={i === activeIndex}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }

package/src/components/Carousel/Carousel.module.scss

@@ -1,5 +1,5 @@
-// Carrusel de imágenes — navegación manual. Las flechas y los puntos se
-// posicionan en absoluto sobre el viewport.
+// Carrusel de imágenes — navegación nativa con scroll-snap. Las flechas y
+// los puntos disparan scrollBy sobre el mismo track. Swipe nativo en iOS.
 .carousel {
   position: relative;
   width: 100%;
@@ -16,6 +16,34 @@
   position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+}
+
+// Track horizontal scrollable con snap obligatorio: el navegador maneja el
+// swipe en mobile sin necesidad de listeners de touch.
+.track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+.slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  scroll-snap-align: start;
+  // Fuerza un slide por gesto incluso en swipes rápidos — mantiene la lógica
+  // de clones simple (sólo necesitamos 1 clon por lado).
+  scroll-snap-stop: always;
 }
 
 // Epígrafe — franja negra de altura fija (38px) sobre el borde inferior.

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

@@ -2,6 +2,7 @@ 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 { volantaWithStop } from '../../../../utils/volanta.js'
 import styles from '../../Hero.module.scss'
 
 export default function V1({ article, important = false, inlineStyle }) {
@@ -25,7 +26,7 @@ export default function V1({ article, important = false, inlineStyle }) {
         )}
         <div className={styles.body}>
           <h2 className={styles.headline}>
-            {article.volanta && <span className={styles.category}>{article.volanta}. </span>}
+            {article.volanta && <span className={styles.category}>{volantaWithStop(article.volanta)} </span>}
             {article.titulo}
           </h2>
           {article.copete && (

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

@@ -1,6 +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 s from './V2.module.scss'
 
 export default function V2({ article, important = false, inlineStyle }) {
@@ -25,10 +26,12 @@ export default function V2({ article, important = false, inlineStyle }) {
             </div>
           )}
           <div className={s.overlay}>
-            {article.volanta && (
-              <span className={s.volantaWrap}><span className={s.volanta}>{article.volanta}.</span></span>
-            )}{' '}
-            <h2 className={s.headlineWrap}><span className={s.headline}>{article.titulo}</span></h2>
+            <h2 className={s.headline}>
+              {article.volanta && (
+                <span className={s.volanta}>{volantaWithStop(article.volanta)} </span>
+              )}
+              {article.titulo}
+            </h2>
           </div>
         </div>
 

package/src/components/Hero/variants/V2/V2.module.scss

@@ -53,55 +53,27 @@
 }
 
 // ── Overlay SOBRE la imagen en todos los anchos (cajas blancas por línea) ──
+// Sin flex: queremos que volanta y headline fluyan inline en la misma línea
+// (cuando entran). Con flex-column eran filas separadas obligadas.
 .overlay {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 14px;
   padding: 0 14px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   font-family: var(--font-family);
 }
 
-.volantaWrap {
-  display: block;
-  margin-bottom: 5px;
-  max-width: 100%;
-}
-
-.headlineWrap {
-  display: block;
-  max-width: 100%;
-  margin: 0; // el headline ahora es <h2>: anula el margin por defecto del UA para no romper el overlay
-}
-
-// Cajas con fondo blanco que se clonan en cada línea de texto
-.volanta,
+// Una sola caja blanca contiene volanta + título: usamos el background y el
+// box-decoration-break solo en .headline. La .volanta queda como modificador
+// inline (color + peso) DENTRO de la misma caja, así no se ve corte entre
+// las dos partes del texto.
 .headline {
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   background: #fff;
   padding: 3px 7px;
-}
-
-.volanta {
-  color: var(--primary-color, #4bac48);
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1.5;
-
-  @include respond(tablet) {
-    font-size: 26px;
-  }
-
-  @include respond(desktop) {
-    font-size: 28px;
-  }
-}
-
-.headline {
+  margin: 0; // h2 default UA margin desplaza el overlay anclado por bottom
   color: var(--text-color, #252523);
   font-size: 20px;
   font-weight: 800;
@@ -117,6 +89,11 @@
   }
 }
 
+.volanta {
+  color: var(--primary-color, #4bac48);
+  font-weight: 700;
+}
+
 // ── Copete debajo de la imagen (si existe) ───────────────────────────────
 .copete {
   font-size: 14px;
@@ -153,8 +130,12 @@
     @include respond(tablet) {
       aspect-ratio: 16 / 7;
     }
+    // Desktop: V1 cap la imagen importante a 500px (sin esto el hero ocupa
+    // ~774px y rompe el ratio respecto a V1). Replicamos acá para que V2 y
+    // V1 tengan la misma altura en portada de escritorio.
     @include respond(desktop) {
       aspect-ratio: unset;
+      max-height: 500px;
     }
   }
 

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

@@ -1,6 +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 s from './V3.module.scss'
 
 export default function V3({ article, important = false, inlineStyle }) {
@@ -26,8 +27,12 @@ export default function V3({ article, important = false, inlineStyle }) {
           )}
           <div className={s.gradient} aria-hidden="true" />
           <div className={s.overlay}>
-            {article.volanta && <p className={s.volanta}>{article.volanta}</p>}
-            <h2 className={s.headline}>{article.titulo}</h2>
+            <h2 className={s.headline}>
+              {article.volanta && (
+                <span className={s.volanta}>{volantaWithStop(article.volanta)} </span>
+              )}
+              {article.titulo}
+            </h2>
           </div>
         </div>
 

package/src/components/Hero/variants/V3/V3.module.scss

@@ -78,20 +78,22 @@
   font-family: var(--font-family);
 }
 
+// Volanta inline dentro del h2: misma línea que el título, color primario
+// uppercase. El tamaño chico la hace funcionar como "etiqueta de sección".
 .volanta {
-  margin: 0 0 6px;
   color: var(--primary-color, #4bac48);
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
+  white-space: nowrap;
 
   @include respond(tablet) {
-    font-size: 26px;
+    font-size: 18px;
   }
 
   @include respond(desktop) {
-    font-size: 28px;
+    font-size: 20px;
   }
 }
 
@@ -148,8 +150,12 @@
     @include respond(tablet) {
       aspect-ratio: 16 / 7;
     }
+    // Desktop: V1 cap la imagen importante a 500px (sin esto el hero ocupa
+    // ~774px y rompe el ratio respecto a V1). Replicamos acá para que V3 y
+    // V1 tengan la misma altura en portada de escritorio.
     @include respond(desktop) {
       aspect-ratio: unset;
+      max-height: 500px;
     }
   }
 

package/src/utils/volanta.js

@@ -0,0 +1,12 @@
+// Helper compartido por cabezales, hero, bajada, etc. La volanta se renderiza
+// inline con el título separada por ". " (en cabezales el espacio lo da el
+// `margin-right` del CSS; en bajada/leeAdemas/loQueSeLee es un literal en JSX).
+// Si quien edita la nota ya cerró la volanta con un signo (".", "!", "?", "…"),
+// no agregamos otro punto — devolvemos el texto tal cual.
+
+const SENTENCE_END = /[.!?…]\s*$/
+
+export function volantaWithStop(volanta) {
+  if (!volanta) return ''
+  return SENTENCE_END.test(volanta) ? volanta : `${volanta}.`
+}