feat(main-carousel): enhance image handling for responsive design

src/app/shared/components/main-carousel/main-carousel.component.spec.ts

@@ -18,12 +18,20 @@ class TestHostComponent {
   readonly images = ['/images/one.webp', '/images/two.webp', '/images/three.webp'];
 }
 
+@Component({
+  imports: [MainCarouselComponent],
+  template: `<app-main-carousel [images]="images" />`,
+})
+class ResponsiveTestHostComponent {
+  readonly images = [{ desktop: '/images/desktop.webp', mobile: '/images/mobile.webp' }];
+}
+
 describe('MainCarouselComponent', () => {
   let fixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TestHostComponent],
+      imports: [TestHostComponent, ResponsiveTestHostComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestHostComponent);
@@ -41,6 +49,19 @@ describe('MainCarouselComponent', () => {
     expect(images[0].classList).toContain('main-carousel__image--active');
   });
 
+  it('usa la variante móvil del crop cuando está disponible', () => {
+    const responsiveFixture = TestBed.createComponent(ResponsiveTestHostComponent);
+    responsiveFixture.detectChanges();
+
+    const picture = responsiveFixture.nativeElement.querySelector('picture') as HTMLPictureElement;
+    const source = picture.querySelector('source') as HTMLSourceElement;
+    const image = picture.querySelector('img') as HTMLImageElement;
+
+    expect(source.getAttribute('media')).toBe('(max-width: 576px)');
+    expect(source.getAttribute('srcset')).toBe('/images/mobile.webp');
+    expect(image.getAttribute('src')).toBe('/images/desktop.webp');
+  });
+
   it('carga las imágenes secuencialmente y prioriza la imagen visible', () => {
     const images = fixture.nativeElement.querySelectorAll(
       '.main-carousel__image',