# Entrega 1 — Home (portada y cabecera)

Primera de las cinco entregas de UX (ver `..\LEEME.md`). **No necesita nada antes.** Trae la
estética de la **portada** y la **cabecera nueva en todas las páginas** (portada, listados y ficha):
transparente sobre la foto en la portada, sin sombra en los listados, que baja al subir por la página,
con la foto principal más alta y la franja de ofertas más fina debajo; Snoopy y licencias y Comunidad
se abren como el menú de Catálogo, y el idioma, de cristal oscuro. También lo que es común a todas las páginas: fuera la flecha de volver arriba y dos
scripts muertos. Después vienen Catálogo (2), Ficha (3), Newsletter (4) y Filtros (5).

## 1. Qué cambia

### Portada

| Código | Qué se ve |
|---|---|
| UX-HOME-01 | "Explora nuestras camisetas": 2 filas en ordenador y 6 prendas en móvil |
| UX-HOME-02 | Sección nueva "Nuestras sudaderas" (12 en ordenador, 6 en móvil) |
| UX-HOME-03 | Sección nueva "Nuevas licencias" (dos filas en ordenador, 6 en móvil) |
| UX-HOME-04 | Las dos secciones nuevas, con el mismo aspecto que las de la web |
| UX-HOME-05 | "Explora nuestras camisetas" vuelve a tener su botón "Ver todo" |
| UX-HOME-06 | Los cinco servicios se deslizan de lado en móvil |
| UX-HOME-07 | Huecos de la portada, a la medida de Scuffers |
| UX-HOME-08 | Bestsellers: 12 productos en vez de 20 |
| UX-HOME-09 | El botón de "Con mucha categoría" dice "Ver todo" |
| UX-HOME-11 | La franja de ofertas en móvil. Después, UX-CAB-06 la deja en 30 px (7 arriba y abajo), justo debajo de la foto: van las dos reglas, en ese orden |

Orden de la portada después del cambio: "Cada día 1 nueva camiseta" → "Explora nuestras camisetas" + "Ver todo" → **"Nuestras sudaderas"** + "Ver todo" → **"Nuevas licencias"** + "Ver todo" → el resto, como hoy.

### Todas las páginas

| Código | Qué se ve |
|---|---|
| UX-HOME-12 = UX-CAT-84 | Fuera la flecha de volver arriba (es un solo cambio con dos códigos) |
| UX-LIMPIEZA-01 | Fuera el contador antiguo, que no hace nada (portada y ficha) |
| UX-LIMPIEZA-02 | Fuera `jquery.countdown`, que no usa nadie (portada, listados y ficha) |

### Cabecera

| Código | Dónde | Qué se ve | Va en |
|---|---|---|---|
| UX-CAB-01 | Portada | La cabecera va **transparente encima de la foto principal**, con menú, logo e iconos en blanco, como Cold Culture. Detalles en la lista de debajo | `portada.css` |
| UX-CAB-02 | Listados | Sin la sombra de debajo de la cabecera | `listados.css` |
| UX-CAB-03 | Las tres | **La cabecera baja al subir por la página.** Detalles en la lista de debajo | `comun.js` y `comun.css` |
| UX-CAB-07 | Las tres | **El desplegable del idioma** pasa a ser una tarjeta de cristal oscuro. Detalles en la lista de debajo | `comun.css` |
| UX-CAB-08 | Las tres | **Snoopy y licencias y Comunidad se abren como el menú de Catálogo**: la cabecera se pone blanca y debajo sale una banda blanca a todo el ancho, con el nombre del apartado y sus enlaces. Detalles en la lista de debajo | `comun.css` |
| UX-CAB-06 | Portada | En móvil y tablet, **la foto principal crece y la franja negra de ofertas, más fina, va justo debajo**; después, el título y el resto de la web. Detalles en la lista de debajo | `portada.css` |
| UX-CAB-09 | Listados | Con la cabecera fija, el botón "Filtros" de la web se queda en su sitio, como hoy (ver 4) | `listados.css` |

**UX-CAB-01, en detalle:**
- Detrás de la cabecera hay una sombra suave arriba de la foto, para que el blanco se lea.
- Con Catálogo, Snoopy y licencias o Comunidad abiertos (los tres se abren a todo el ancho, UX-CAB-08) la cabecera vuelve a blanco, como en la web. Con el idioma abierto se queda en la foto: su desplegable va de cristal oscuro (UX-CAB-07).
- "Last Chance" se queda en su rosa (`#f92b89`) también encima de la foto, como cuando la cabecera flota: el blanco no se aplica a los enlaces `a.rosa`.
- En móvil (hasta 450 px), la foto pasa a 406 de alto; UX-CAB-06 la sube después a 521.

**UX-CAB-07, en detalle** (solo en ordenador; por debajo de 941 px la web esconde el idioma):
- El desplegable del idioma es una tarjeta negra translúcida (negro al 62 %) con lo de detrás desenfocado, esquinas de 12, borde fino claro, sombra y un pico que apunta al idioma.
- Cada idioma, con su bandera, en su fila redondeada, en blanco; al pasar el ratón, la fila se pone rosa.
- En todas las páginas: sobre blanco se ve como una tarjeta gris oscura. También con la cabecera fija.

**UX-CAB-08, en detalle** (solo en ordenador, desde 941 px):
- Al pasar el ratón por Snoopy y licencias o por Comunidad, la cabecera se pone blanca y debajo sale una banda blanca a todo el ancho, como la de Catálogo: el mismo relleno (40 arriba y abajo, 20 a los lados), el nombre del apartado en negrita con su raya y los enlaces con la letra de Catálogo (Raleway de 14, en negro, subrayados al pasar el ratón). Aparece igual que Catálogo: baja 15 px con un fundido de 0,3 s.
- Entre el título del menú y la banda hay un puente invisible, copia del de Catálogo: al bajar el ratón no se cierra.
- Mientras está abierta, el bloque de la cabecera (`.cabecera-principal`) lleva `contain: layout` y `z-index: 9`, el del menú de Catálogo: así la banda, que va con `position: fixed`, se coloca respecto a la cabecera y queda por encima de la página también en listados y ficha.
- El nombre del apartado ("Snoopy y licencias", "Comunidad") lo pone el CSS (`content`). En la web puede ir en el HTML, como el "Ver todo >" de Catálogo, y entonces sobran esas dos reglas (ver 4).

**UX-CAB-06, en detalle** (hasta 991 px; en ordenador no cambia):
- La foto principal, más alta:
  - hasta 450 px, de 406 a 521;
  - de 451 a 554, del 60 % del alto de la pantalla al 60 % + 113;
  - de 555 a 991, donde la web pone otra foto, del 70 % al 70 % + 113.
- La franja de ofertas (Calcetines 3x2...), de 88 (UX-HOME-11) a 30 de alto: 7 px arriba y abajo, con el mismo texto de 16.
- Entre la franja y el título, 21 px de aire hasta las letras en móvil y 26 en tablet: el margen de abajo de la franja pasa de -20 (UX-HOME-11) a -21.
- La franja va justo debajo de la foto y, después, "Cada día 1 nueva camiseta" y todo lo demás. A 402 px de ancho (contando los 45 de la barra rosa de arriba): la foto acaba en 566, la franja va de 566 a 596 y el título empieza en 610.
- En móvil (hasta 450 px), ese título pasa de 32 a 26 px para que tenga aire a los lados: a 32 solo le quedaban 3 px a cada lado a 402 y se partía en dos líneas a 360. Su margen de arriba pasa de 17 a 19, para que sigan quedando 21 hasta la franja. Los demás títulos no cambian.

**UX-CAB-03, en detalle:**
- Al bajar, la cabecera se va con la página, como hoy.
- En cuanto se sube 5 px, baja deslizando (0,25 s) y se queda fija, en blanco (`#ffffff`), sin transparencia ni sombra.
- Arriba del todo vuelve a su sitio sin salto.
- Solo se mueve la franja de logo, menú e iconos: la barra rosa no.
- Con la cabecera fija, los menús (Catálogo, Snoopy y licencias, Comunidad e idioma) se abren y se pueden usar igual que arriba. Para eso, a la vista va con `transform: none` y no con `translateY(0)`: con un transform y el `overflow-x: clip` de la web, el ratón no llegaba a lo que cuelga de la cabecera y los menús se cerraban al bajar hacia ellos (medido).

**UX-CAB-09, en detalle:** la web tiene en `catalogo.js` un bloque ("hacer que el boton de filtro se
cambie de sitio cuando deje de verse en pantalla") que pone `.btn-fixed` al botón "Filtros" en cuanto la
cabecera tapa el listado, y su hoja lo deja flotando abajo, centrado. Hoy nunca salta, porque la cabecera
se va con la página. Con la cabecera fija saltaría en móvil y tablet: medido, el botón pasa a flotar a
10 px del borde de abajo. UX-CAB-09 lo deja como hoy, en su sitio (en ordenador ese botón no se ve).

## 2. Qué hay en esta carpeta

| Archivo | Qué es |
|---|---|
| `GUIA.md` | Qué hace cada cambio y por qué, sin tecnicismos (para leer antes que este LEEME) |
| `codigo/comun.css` | CSS para todas las páginas: la flecha, la cabecera fija y los desplegables |
| `codigo/comun.js` | JavaScript para todas las páginas: la cabecera que baja al subir |
| `codigo/portada.css` | CSS de la portada: secciones, huecos, cabecera transparente, foto y franja |
| `codigo/listados.css` | CSS de los listados: sin sombra bajo la cabecera y el botón "Filtros" en su sitio |
| `html/comun.md` | Los dos `<script>` muertos que se quitan |
| `html/portada.md` | Las dos secciones nuevas, el botón "Ver todo" y el texto del botón de categorías |
| `capturas/` | Portada, listados y ficha antes y después, en móvil (402), tablet (820) y ordenador (1440); cada página "al subir", con la cabecera fija; y los desplegables del menú abiertos. El "antes" es la web de hoy, sin ningún cambio |

La ficha de producto no lleva archivo propio: en ella todo es común (la cabecera, la flecha y los dos
scripts muertos).

En el código, cada bloque empieza con `/* >>> UX-... | título | paginas: ... */` y su explicación: qué
hace, por qué y las medidas. En el HTML, cada cambio dice qué hacer (Quitar o Añadir), dónde (el selector)
y lleva el HTML exacto.

## 3. Cómo aplicarla

**CSS.** Cada archivo se carga en su plantilla, **después** de las hojas de estilo del sitio:

| Archivo | Plantilla |
|---|---|
| `codigo/comun.css` | Todas las páginas |
| `codigo/portada.css` | Portada |
| `codigo/listados.css` | Listados (todos usan la misma) |

Van separados porque la web no marca en qué página está (el `<body>` no lleva clase), y hay reglas de
una plantilla que tocarían piezas de otra.

- Los archivos son ASCII puro: no se rompen con la codificación de la web (Windows-1252).
- Algunos selectores llevan un `div.` de más o un `!important`. En el laboratorio hacía falta para ganar a las hojas del sitio, y el comentario de cada uno dice por qué. Se pueden simplificar si se pasan a las hojas del sitio, pero entonces hay que volver a mirar las medidas.

**HTML.** En `html/` va una lista por plantilla, en el orden en que se aplican:
- `html/comun.md`: quitar los dos `<script>` muertos.
- `html/portada.md`: añadir las dos secciones y el botón "Ver todo", y cambiar el texto del botón de categorías.

Los caracteres especiales van como entidades (`&#225;`). Las rutas son las de la web (con su
`<base href="https://www.pampling.com/">`).

**JavaScript.** `codigo/comun.js` al final del `<body>` de portada, listados y ficha, después de los
scripts del sitio. No usa jQuery, espera a que la página esté cargada y es ASCII puro, con las tildes
escritas en código.

**No se sube nada solo del laboratorio** en esta entrega.

## 4. Lo que pide desarrollo

1. **Productos de las secciones nuevas de la portada** (UX-HOME-02 y 03). En la maqueta están puestos a mano, con nombre, precio, foto y enlace copiados del catálogo. En la web deben salir de la plantilla, con los productos elegidos y ordenados desde el panel de Pampling, sin tocar código. Es lo mismo que se pidió para el carrusel de la cesta.
2. **Mejor en origen que con CSS.** Estas tres cosas se esconden con CSS en la maqueta, pero lo limpio es resolverlas en la plantilla o en el servidor. Hecho eso, su CSS sobra.
   - "Explora nuestras camisetas" (UX-HOME-01): que el servidor mande 8 productos en vez de 20.
   - Bestsellers (UX-HOME-08): que mande 12 en vez de 20.
   - La flecha (UX-HOME-12 = UX-CAT-84): quitar el enlace `a#link_subir` y su bloque "Link subir" de `comunes.inc.js`.
3. **Scripts muertos** (UX-LIMPIEZA-01 y 02). Quitar las etiquetas `<script>` de `modulo_contador_xpresstee.class.js` y `jquery.countdown.min.js` de las plantillas, y los archivos si nada más los usa. Antes, comprobar que ningún otro archivo llama a `.countdown(`.
4. **Quitar de `catalogo.js` el bloque que pone `.btn-fixed` al botón de Filtros** (UX-CAB-09). Es el que empieza por el comentario "hacer que el boton de filtro se cambie de sitio cuando deje de verse en pantalla". Mientras no se quite, UX-CAB-09 lo anula; quitado el bloque, UX-CAB-09 sobra.
5. **Cabecera, detalles técnicos** (los comentarios del código los explican):
   - La cabecera fija va con `position: fixed` y deja un hueco de su alto. No se usa `position: sticky` porque la web pone `overflow-x: hidden` en `html` y `body`, y con eso no funciona.
   - Mientras flota, lleva la clase `ux-cab-fija`. En la portada, UX-CAB-01 no se aplica mientras flota, así que la cabecera se ve blanca.
   - Va con `z-index: 99998`, por debajo del menú lateral de móvil (99999).
   - La web ya pone la clase `isSticky` a la cabecera cuando la página no está arriba del todo (`comunes.inc.js`). No choca con esta entrega.
   - A la vista, la cabecera fija va con `transform: none`: con un transform y el `overflow-x: clip` que la web le pone a la cabecera, los menús se cerraban al bajar el ratón hacia ellos.
   - El nombre del apartado de Snoopy y licencias y de Comunidad (UX-CAB-08) lo pone el CSS. Si se prefiere, se escribe en el HTML del menú, como el "Ver todo >" de Catálogo, y se quitan las dos reglas `content`.

## 5. Cómo comprobarla

Medido en el laboratorio (alto de la cabecera: 64 en móvil, 70 en tablet y 67 en ordenador; arriba del
todo empieza a 45, debajo de la barra rosa):

- [ ] **Portada.**
  - "Nuestras sudaderas" y "Nuevas licencias" en su sitio.
  - 6 prendas en móvil en cada sección.
  - Bestsellers con 12.
  - Todos los "Ver todo" llevan a su listado.
- [ ] **Portada, arriba del todo:**
  - La cabecera va transparente sobre la foto, con el texto y los iconos en blanco, salvo "Last Chance", que sigue en rosa.
  - Al abrir Catálogo, Snoopy y licencias o Comunidad, la cabecera se pone blanca. Al abrir el idioma, se queda en la foto con el menú en blanco.
- [ ] **Portada, foto y franja** (medido):
  - En móvil, la foto mide 521 y la franja de ofertas 30, justo debajo de la foto.
  - De la franja a las letras de "Cada día 1 nueva camiseta", 21 px en móvil y 26 en tablet.
  - Ese título, a 26 px en móvil y en una sola línea: 23 px a cada lado a 360, 44 a 402 y 68 a 450.
  - En tablet, la foto es 113 px más alta que el 70 % de la pantalla (60 % + 113 de 451 a 554).
- [ ] **Desplegables del menú** (en ordenador): Snoopy y licencias y Comunidad se abren como Catálogo, en una banda blanca a todo el ancho con el nombre del apartado y su raya; el idioma, en una tarjeta negra translúcida de 176 de ancho con pico. Igual en las tres páginas y con la cabecera fija: al mover el ratón del menú a su banda o a su tarjeta no se cierra, y se puede pulsar cada enlace (también en Catálogo).
- [ ] **En las tres páginas:**
  - Al bajar, la cabecera se va.
  - Al subir un poco, baja y se queda fija arriba (en 0), blanca del todo.
  - Arriba del todo vuelve exactamente a su sitio.
  - Sin la flecha de volver arriba, también al bajar.
  - En el código de la página no están los dos scripts.
- [ ] **Listados:**
  - Sin sombra bajo la cabecera.
  - Al bajar y volver a subir con la cabecera fija, el botón "Filtros" de la web se queda en su sitio y no se pone a flotar abajo (móvil y tablet).
  - El resto del listado, como hoy.
- [ ] En móvil, el menú lateral sale por encima de la cabecera fija.
- [ ] La consola no da errores nuevos.
- [ ] Compararlo con `capturas/portada-*`, `listados-*`, `ficha-*` (antes/después), `portada-al-subir-*`, `listados-al-subir-*`, `ficha-al-subir-*` y `menu-*` (móvil/tablet/ordenador).

**Comprobado también:** el código de esta entrega es el mismo, bloque a bloque, que el que iba en la
entrega conjunta anterior, salvo UX-CAB-09, que es nuevo, y UX-CAB-03, cuya cabecera fija pasa a
blanco del todo (antes, blanco al 85 % con desenfoque). Todo lo que buscan las instrucciones y el
código está igual en la web de hoy (HTML del 2026-09-29).

## 6. Lo que NO va en esta entrega

- **Catálogo** (entrega 2): banda negra, rejilla y huecos de los listados, y 64 productos por página.
- **Ficha** (entrega 3): los huecos de la ficha y el contador de fin de oferta.
- **Newsletter** (entrega 4): la oferta de la portada, la línea junto al precio de la ficha y el bloque del pie.
- **Filtros** (entrega 5): "Ordenar por" y "Filtros" bajo las migas, el panel de filtros y el botón flotante.

## 7. Petición relacionada (no bloquea esta entrega)

- **El "Ver todo" de licencias** (el de "Nuevas licencias", UX-HOME-03). Lleva al "Ver todo" del menú (`buscar-catalogo/menu/Licencias`), que hoy devuelve solo camisetas de licencia y se titula "Catálogo completo". Se pide que ese listado reúna todos los productos de licencia (camisetas, tazas y calcetines) y lleve su propio título.