fix(ui): uniform header title size on phones and untruncated subtitle

The list and map pages kept a 430px override (1.4rem) dating from the
'Playas de Cantabria' brand, so their title rendered smaller than the home
page's on phones. And with the header logo, the home subtitle no longer fit
at 0.8rem and got ellipsized. The title is now 1.6rem everywhere; on phones
the logo cedes to 44px and the subtitle scales with the viewport (clamp),
verified overflow-free at 412px and 360px.

Author: oscaruiz

frontend/src/pages/HomePage.css

@@ -62,6 +62,14 @@
   text-overflow: ellipsis;
 }
 
+/* "Descubre las mejores playas de Cantabria" is the longest subtitle; with
+   the header logo it no longer fit a phone at 0.8rem and got ellipsized.
+   Scales with the viewport so it also survives 360px; below ~330px the
+   ellipsis returns, which is the accepted degradation. */
+@media (max-width: 480px) {
+  .hp-sticky-subtitle { font-size: clamp(0.6rem, 3vw - 0.05rem, 0.72rem); }
+}
+
 /* La cabecera mide 84px fijos (`--playa-header-h`) y el contenido de todas las
    páginas se descuelga de ese número, así que el título no puede pasar de una
    línea. Pacifico es ancha, pero "Playucas.es" pide ~190px a 1.6rem y en un

frontend/src/pages/MapaPage.css

@@ -47,8 +47,9 @@
   text-overflow: ellipsis;
 }
 
-@media (max-width: 430px) {
-  .mapa-sticky-title { font-size: 1.4rem; }
+/* Same title size as the other pages on phones — see PlayasList.css. */
+@media (max-width: 480px) {
+  .mapa-sticky-subtitle { font-size: clamp(0.6rem, 3vw - 0.05rem, 0.72rem); }
 }
 
 /* Alinea el título/selector con el contenedor de las demás páginas

frontend/src/pages/PlayasList.css

@@ -58,10 +58,12 @@
   text-overflow: ellipsis;
 }
 
-/* Misma razón que en la portada: la cabecera son 84px fijos, el título no
-   puede pasar de una línea y en un móvil de 360px Pacifico a 1.6rem no cabe. */
-@media (max-width: 430px) {
-  .home-sticky-title { font-size: 1.4rem; }
+/* The 430px title override (1.4rem) is gone: it dated from the "Playas de
+   Cantabria" brand and made this page's title visibly smaller than the home
+   page's on phones. "Playucas.es" at 1.6rem fits next to the header logo even
+   at 360px; the subtitle cedes size instead (see LogoMarca.css). */
+@media (max-width: 480px) {
+  .home-sticky-subtitle { font-size: clamp(0.6rem, 3vw - 0.05rem, 0.72rem); }
 }
 
 /* --- Header hero area (banda bajo el header fijo) --- */

frontend/src/shared/ui/LogoMarca.css

@@ -22,3 +22,13 @@
   flex: 1;
   min-width: 0;
 }
+
+/* On phones the header row is tight: the logo cedes a few pixels so the
+   subtitle can keep its full text (it also drops to 0.72rem, per page). */
+@media (max-width: 480px) {
+  .marca-logo {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+  }
+}