fix(home): hold the favourites section until the featured ranking loads

The catalog resolves at once from the local fallback, so "Tus playas
favoritas" was painted alone above the spinner, with bare name/municipio
rows, and then re-rendered with conditions once /featured arrived. Gate
the section on !featuredLoading like every other block of the page. It
still renders when the ranking fails — only the timing changes, not the
independence from the ranking's fate.

Adds a characterization case: favourites absent while /featured is
pending, present after it rejects.

Claude-Session: https://claude.ai/code/session_01CZeTJqzoJxUKi7uWcVDnoj

Author: oscaruiz

frontend/src/pages/HomePage.tsx

@@ -472,8 +472,10 @@ const HomePage: React.FC = () => {
         />
 
         <div className="hp-body">
-          {/* Favorites first — independent of the featured ranking's fate. */}
-          {favoritasEnHome.length > 0 && (
+          {/* Favorites first — independent of the featured ranking's fate
+              (they still show if it fails), but not of its timing: painted
+              alone above the spinner they looked like the whole page. */}
+          {!featuredLoading && favoritasEnHome.length > 0 && (
             <section className="hp-section hp-section--favoritas">
               <h2 className="section-kicker">{t('home.favoritas')}</h2>
               <div className="hp-alt-list">

frontend/src/test/characterization/homePage.states.test.tsx

@@ -18,6 +18,7 @@
 import React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
 import HomePage from '../../pages/HomePage';
+import { recargarFavoritas } from '../../modules/favorites';
 import { renderWithProviders } from '../render';
 import { installFetchMock, restoreFetch, route, deferred, RouteSpec } from '../http/fakeFetch';
 import { beachesResponse } from '../fixtures/beaches';
@@ -35,6 +36,39 @@ afterEach(() => {
 });
 
 describe('HomePage — estados', () => {
+  it('no pinta las favoritas hasta que /featured termina, y sí cuando falla', async () => {
+    // Seeded straight into storage: the catalog arrives at once (local
+    // fallback) and used to paint this section alone above the spinner.
+    localStorage.setItem(
+      'playas:favoritas',
+      JSON.stringify({ version: 1, beachCodes: [beachesResponse[0].codigo] }),
+    );
+    recargarFavoritas();
+
+    const pending = deferred<RouteSpec>();
+    installFetchMock([
+      route(FEATURED, () => pending.promise),
+      route(BEACHES, { json: beachesResponse }),
+    ]);
+
+    renderWithProviders(<HomePage />, { route: '/' });
+
+    expect(await screen.findByText('7 playas')).toBeInTheDocument();
+    expect(screen.getByText('Buscando las mejores playas cerca de ti...')).toBeInTheDocument();
+    expect(screen.queryByText('Tus playas favoritas')).not.toBeInTheDocument();
+
+    // Rejected, not resolved, so the cache stays empty for the next cases.
+    // The section still shows on error: it depends on the ranking's timing,
+    // not on its fate.
+    pending.reject(new Error('backend caído'));
+
+    expect(await screen.findByText('Tus playas favoritas')).toBeInTheDocument();
+    expect(screen.getByText('No se pudieron cargar las condiciones actuales')).toBeInTheDocument();
+
+    localStorage.removeItem('playas:favoritas');
+    recargarFavoritas();
+  });
+
   it('muestra el mensaje de búsqueda y da paso al error si falla', async () => {
     const pending = deferred<RouteSpec>();
     installFetchMock([