feat(store-header): enhance mobile layout with improved spacing and responsive styles

src/app/core/layout/store-layout/store-header/immersive-store-header.component.html

@@ -118,6 +118,9 @@
           ariaLabel="Imágenes del evento"
         />
       }
+
     }
+
+    <ng-content />
   </div>
 </header>

src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss

@@ -7,7 +7,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   isolation: isolate;
-  min-height: 640px;
   color: #fff;
   background: #f5f5f5;
 }
@@ -18,7 +17,7 @@
   z-index: 1;
   min-width: 0;
   padding-top: clamp(1.75rem, 4vw, 2.5rem);
-  padding-bottom: 0.5rem;
+  padding-bottom: clamp(1rem, 2vw, 1.5rem);
 }
 
 .immersive-header__backdrop {
@@ -136,11 +135,13 @@
 .immersive-header__title {
   margin: -0.15rem 0 0;
   font-size: 140px;
-  line-height: 1.05;
+  line-height: 0.7;
 }
 .immersive-header__description {
-  margin: 1.15rem 0 0;
+  margin: 30px 0 0;
-  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
+  font-family: 'Gotham Book', sans-serif;
+  font-size: 18px;
+  font-weight: 300;
   text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 }
 .immersive-header__timer {
@@ -203,7 +204,8 @@
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto auto;
       align-items: center;
-      padding: 1.25rem 0 0;
+      align-content: start;
+      padding: 1.875rem 0 1.5rem;
     }
 
     // Keep one search form while placing it below the hero copy on mobile.
@@ -236,7 +238,7 @@
 
     .immersive-header__copy {
       grid-area: 3 / 1 / auto / -1;
-      margin: 1rem 0 0;
+      margin: 1.25rem 0 0;
     }
 
     .immersive-header__eyebrow {
@@ -244,18 +246,21 @@
     }
 
     .immersive-header__title {
-      font-size: clamp(42px, 13vw, 64px);
+      font-size: clamp(40px, 12vw, 56px);
-      line-height: 0.95;
+      line-height: 0.7;
     }
 
     .immersive-header__description {
-      margin-top: 2rem;
+      margin-top: 30px;
       font-size: clamp(11px, 3vw, 14px);
+      line-height: 1.5;
+      color: #666;
+      text-shadow: none;
     }
 
     .immersive-header__search {
       grid-area: 4 / 1 / auto / -1;
-      width: 76%;
+      width: 74%;
       max-width: 28rem;
       margin: 0.5rem auto 0;
     }
@@ -264,11 +269,11 @@
       right: auto;
       left: 0;
       width: 100%;
-      color: #fff;
+      color: var(--tenant-danger, #dc3545);
     }
 
     app-continuous-image-carousel {
-      grid-area: 5 / 1 / auto / -1;
+      grid-area: 6 / 1 / auto / -1;
       margin-top: 1.5rem;
       --carousel-card-width: 27vw;
       --carousel-gap: 3.3vw;
@@ -280,6 +285,9 @@
     }
 
     .immersive-header__backdrop {
+      // Keep the fade tied to the hero, independent of the content below it.
+      align-self: start;
+      height: 12.5rem;
       // Fade the entire layer so its dark base cannot leave a subpixel seam.
       mask-image: linear-gradient(#000 calc(100% - 8px), transparent 100%);
     }
@@ -287,10 +295,10 @@
     .immersive-header__backdrop::after {
       background: linear-gradient(
         180deg,
-        rgba(0, 0, 0, 0.45) 0%,
+        rgba(0, 0, 0, 0.25) 0%,
-        rgba(0, 0, 0, 0.15) 55%,
+        rgba(245, 245, 245, 0.1) 30%,
-        rgba(245, 245, 245, 0.55) 75%,
+        rgba(245, 245, 245, 0.65) 65%,
-        #f5f5f5 95%,
+        #f5f5f5 98%,
         #f5f5f5 100%
       );
     }
@@ -300,10 +308,10 @@
     .immersive-header__search .form-control {
       min-height: 36px;
       padding: 0.25rem 2.5rem 0.25rem 0.75rem;
-      border: 1px solid rgba(255, 255, 255, 0.85);
+      border: 1px solid #888;
       border-radius: 3px;
       background: transparent;
-      color: #fff;
+      color: #666;
       font-size: 16px;
 
       &::placeholder {
@@ -311,13 +319,13 @@
       }
 
       &:focus-visible {
-        outline: 2px solid #fff;
+        outline: 2px solid #666;
         outline-offset: 2px;
       }
     }
 
     .immersive-header__search .input-search-icon {
-      color: #fff;
+      color: #666;
       right: 0.75rem;
     }
 

src/app/core/layout/store-layout/store-header/store-header.component.html

@@ -20,7 +20,17 @@
       (loginClick)="loginClick.emit()"
       (logoutClick)="logoutClick.emit()"
       (searchSubmit)="searchSubmit.emit($event)"
-    />
+    >
+      @if (displayCategories() && categories().length) {
+        <nav class="immersive-categories" aria-label="Categorías">
+          <app-horizontal-carousel
+            [items]="categoryItems()"
+            ariaLabel="Categorías"
+            (itemSelect)="onCategoryItemSelect($event)"
+          />
+        </nav>
+      }
+    </app-immersive-store-header>
   }
   @default {
     <ng-container *ngTemplateOutlet="standardHeader" />
@@ -50,13 +60,3 @@
     (categorySelect)="categorySelect.emit($event)"
   />
 </ng-template>
-
-@if (headerType() === 'immersive' && displayCategories() && categories().length) {
-  <nav class="immersive-categories" aria-label="Categor<6F>as">
-    <app-horizontal-carousel
-      [items]="categoryItems()"
-      ariaLabel="Categor<6F>as"
-      (itemSelect)="onCategoryItemSelect($event)"
-    />
-  </nav>
-}

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -14,6 +14,7 @@ app-immersive-store-header {
 }
 
 :host(.immersive-shell--compact) .immersive-categories {
+  margin-top: 0.75rem;
   border: 0;
   box-shadow: none;
   background: transparent;
@@ -33,20 +34,24 @@ app-immersive-store-header {
 
 .immersive-categories {
   position: relative;
-  z-index: 0;
+  z-index: 1;
   width: 100%;
+  margin-top: clamp(5rem, 11vw, 9rem);
   padding: 0.375rem 1rem;
-  background: #f5f5f5;
+  background: transparent;
   color: #666;
   font-size: 15px;
   font-weight: 700;
-  --horizontal-carousel-gap: clamp(1rem, 3vw, 2.5rem);
+  --horizontal-carousel-gap: 90px;
   --horizontal-carousel-text-transform: uppercase;
 }
 
 @media (max-width: 767.98px) {
   .immersive-categories {
-    padding: 1rem 0.25rem 0;
+    grid-area: 5 / 1 / auto / -1;
+    min-width: 0;
+    margin-top: 1.5rem;
+    padding: 0 1rem;
     font-size: clamp(10px, 2.8vw, 12px);
     --horizontal-carousel-visible-items: 3;
     --horizontal-carousel-gap: 0.5rem;

src/app/core/layout/store-layout/store-layout.component.spec.ts

@@ -332,7 +332,7 @@ describe('StoreLayoutComponent', () => {
     expect(element.querySelector('[data-testid="store-header-tickets"]')).not.toBeNull();
   });
 
-  it('shows immersive categories below the header and navigates on selection', () => {
+  it('shows immersive categories inside the header and navigates on selection', () => {
     tenantState.set({
       ...tenant,
       header_type: 'immersive',
@@ -362,7 +362,7 @@ describe('StoreLayoutComponent', () => {
 
     expect(header).not.toBeNull();
     expect(categories).not.toBeNull();
-    expect(header?.contains(categories)).toBe(false);
+    expect(header?.contains(categories)).toBe(true);
     expect(categoryButton?.textContent?.trim()).toBe('MÚSICA');
 
     const navigate = vi.spyOn(TestBed.inject(Router), 'navigate');