/* ========================================================================== Torre de Collserola — el diseño de móvil Hoja aparte y no un bloque más de ajustes.css porque esto no es una corrección: es un SEGUNDO DISEÑO. El 14-sep-2026 aparece el Figma «Torre Collserola_responsive» (archivo WuLhzYw15KuQ7U7UwjmIKu), dibujado sobre un lienzo de 393 px, que no es el de escritorio reducido. Todo lo que hay aquí se aplica solo por debajo de 700 px y está medido sobre ese lienzo. La escala tipográfica del móvil NO está aquí: vive en el bloque final de tokens.css, porque son tokens. Aquí queda lo que no se puede resolver con un token: piezas que no leen su token, proporciones de imagen, alturas de portada y las dos páginas que rompen el patrón. Método: cada valor va como porcentaje de 393 px, igual que el resto de la web va como porcentaje de 2000, con un tope en px para que la franja de 480 a 700 —que no está dibujada en ningún Figma— no se desmadre. Ver [torre-collserola-metodo-fidelidad] y [torre-collserola-responsive]. ========================================================================== */ @media (max-width: 700px) { /* ====================================================================== EL PIE Es el bloque que más se notaba y el que más rinde: va en las 6 páginas. El pie del diseño mide 715 px sobre 393 y su ritmo interior está medido nodo a nodo del Figma (frame Group 344). El tema lo servía con las distancias del escritorio en vw sobre 2000, que en un teléfono se quedaban en la cuarta parte: el pie salía a 530 px y apelotonado. ====================================================================== */ /* Aire exterior: 28 px arriba y 24 abajo. */ .pie { padding-block: min(7.12vw, 34px) min(6.11vw, 29px); } /* 1 · El logotipo ------------------------------------------------------- No lee --fs-marca: pie.css lo mide en unidades de CONTENEDOR (14,59cqw del interior del pie), que en escritorio es lo correcto porque el logotipo se ajusta a su caja. En un teléfono ese 14,59 % daba 45 px y el suelo de 3rem lo dejaba en 48, cuando el diseño pide 71,13 px —el 18,1 % del ancho— ocupando 344 de los 393. */ .pie__logotipo { font-size: min(18.1vw, 87px); line-height: 0.897; /* 63,8/71,13 medido en el Figma */ } /* 2 · Ritmo vertical de la columna -------------------------------------- Distancias del Figma, tomando como origen el borde superior del pie: claim 28 · logotipo 84 · dirección 228 · redes 317 · «participada por» 388 · logotipos 427 · enlaces 560 · copyright 677 · fin 715. */ .pie__claim { margin-bottom: min(7.12vw, 34px); } /* 28 px */ .pie__direccion { margin-top: min(5.34vw, 26px); /* 21 px */ margin-bottom: min(10.43vw, 50px); /* 41 px */ } .pie__redes { margin-bottom: min(12.47vw, 60px); } /* 49 px */ .pie__rotulo--normal { margin-bottom: min(4.58vw, 22px); } /* 18 px */ /* 3 · Los textos pequeños del pie ---------------------------------------- Tipografía y cuerpos del Figma de móvil (copia B del pie, nodos 2:603 a 2:756): todo en Acumin Condensed, que aquí es Saira, como en escritorio. claim Light 15 px, tracking 0,05em, interlineado 16 dirección Regular 13 px, interlineado 16 «Síguenos en:» Regular 16 px, tracking 0,05em, versales «participada por» Regular 15,25 px, tracking 0,05em enlaces legales Regular 15 px, versales, en columna copyright Regular 12 px Del 27 al 29-sep esta letra fue Inter (ajustes.css, bloque 10, ya retirado a petición de diseño). */ .pie__claim { font-weight: var(--w-light); font-size: var(--fs-claim); /* 15 px */ line-height: 1.07; } .pie__direccion { font-size: var(--fs-dato); /* 13 px */ line-height: 1.23; } .pie__rotulo { font-weight: var(--w-regular); font-size: min(4.07vw, 20px); /* 16 px */ } .pie__rotulo--normal { font-size: min(3.88vw, 19px); } /* 15,25 px */ .enlaces-legales { font-weight: var(--w-regular); font-size: var(--fs-legal); /* 15 px */ } .pie__copyright { font-weight: var(--w-regular); font-size: min(3.05vw, 15px); /* 12 px */ } /* 4 · Los iconos sociales, a la medida del diseño ------------------------- Chip de 21,5 px. El icono ocupa el chip entero porque viene dibujado sobre el mismo lienzo y a la proporción del Figma (pie.css). */ .redes__chip { width: min(5.48vw, 26px); height: min(5.48vw, 26px); } .redes__chip img { width: 100%; } /* 5 · Los accionistas siguen en 2x2 ------------------------------------ pie.css los pasa a una columna por debajo de 560 px, pero el diseño de móvil mantiene la retícula de dos: cellnex y Generalitat arriba, Telefónica y AMB debajo. Y los sirve más grandes de lo que salían. */ .socios { grid-template-columns: repeat(2, auto); column-gap: min(10vw, 48px); row-gap: min(7.9vw, 38px); } .socios img { max-height: min(6.6vw, 32px); } /* 6 · La línea legal ---------------------------------------------------- Tres diferencias con el escritorio, las tres del Figma de móvil: los enlaces van en COLUMNA y sin la pleca que los separa en horizontal, el copyright va DEBAJO de los enlaces y no encima, y no hay filete. De paso arregla un defecto que solo se veía en el teléfono: la fila horizontal envolvía dejando una pleca huérfana al principio de la segunda línea. El pie sale unos 50 px más alto que el Figma porque nosotros tenemos CINCO enlaces y el diseño cuatro: el quinto es «Configurar cookies», que es obligatorio desde que hay aviso de cookies. */ .pie__legal { display: flex; flex-direction: column; gap: 0; margin-top: min(12.98vw, 62px); /* 51 px del Figma */ padding-top: 0; border-top: 0; } .pie__enlaces { order: 1; } .pie__copyright { order: 2; margin-top: min(6.87vw, 33px); /* 27 px del Figma */ } .enlaces-legales { flex-direction: column; gap: min(1.53vw, 7px); /* paso de 24 px con el texto de 18 */ } .enlaces-legales li + li::before { content: none; margin-right: 0; } /* ====================================================================== LAS DOS PÁGINAS QUE ROMPEN EL PATRÓN ====================================================================== */ /* 7 · TELECOM · la portada no es como las demás ------------------------ En las otras cinco páginas el titular de portada va a 70 px y centrado. En TELECOM el Figma de móvil lo pone a 38 px, en Condensed Light, alineado a la IZQUIERDA en x=39 y con interlineado 1,1 — porque su titular es una frase larga y a 70 px ocuparía media pantalla. Sin esta excepción, la escala nueva lo dejaba al triple de lo dibujado. */ body.page-id-91 .portada__titulo { font-size: min(9.67vw, 46px); /* 38 px */ line-height: 1.1; font-weight: var(--w-light); text-align: left; } /* 8 · HISTORIA · la portada es mucho más larga ------------------------- En el Figma de móvil la fotografía de Historia no es una banda de portada: baja hasta y=1055 y la entrada del cuerpo cae ENCIMA, a y=885. La página servía 626 px de portada contra los 885 del diseño, y de ahí venían 260 de los 530 px que le faltaban a la página. Se ajusta solo la altura, que es lo que se puede hacer desde el CSS. Que la entrada del cuerpo caiga sobre la fotografía es una decisión de contenido —el campo «ambiente» de la página— y queda anotada para la segunda ronda de Historia. */ body.page-id-21 .portada__lienzo { min-height: 225vw; } /* 885 px */ /* ====================================================================== CONTACTO ====================================================================== */ /* 9 · La proporción del plano ------------------------------------------- En el diseño el plano ocupa 461 px de alto sobre 393 de ancho (117 %) y se lee como una pieza vertical. La imagen que tenemos es un pantallazo horizontal, así que a 393 px se quedaba en 158: un tercio de lo dibujado, y el bloque perdía todo su peso en la página. Se le da la proporción del diseño y se recorta por el centro. OJO: es un apaño mientras el plano siga siendo el pantallazo del Figma. Ese plano hay que rehacerlo de todos modos —su chincheta no cae sobre la Torre, marca la Fuente de la Budellera—, y al rehacerlo conviene pedirlo ya en vertical para el móvil. */ .contacto__mapa img { aspect-ratio: 393 / 461; width: 100%; height: auto; object-fit: cover; } }