/* ========================================================================== Torre de Collserola — ajustes posteriores al montaje Correcciones fechadas sobre las hojas de base. Se cargan las últimas (ver functions.php) para poder afinar sin reescribir main.css ni secciones.css. Hasta el 3 de septiembre de 2026 este código vivía en «Apariencia · Personalizar · CSS adicional», porque el editor de ficheros del tema devuelve 403 en este hosting y el puente del plugin no autenticaba. Con el puente ya operativo vuelve al tema, que es donde se versiona. El cambio de tipografía de titulares (Archivo → Saira) NO está aquí: vive en tokens.css, que es su sitio. El aviso de cookies tampoco: tiene su propia hoja, assets/css/cookies.css. Ojo con el orden: desde el 14-sep-2026 detrás de esta hoja se cargan movil.css, cookies.css y movimiento.css. Una regla de aquí que no se aplica en el teléfono probablemente la está pisando movil.css. ========================================================================== */ /* ========================================================================== CORRECCIONES 31-08-2026 Peticiones del cliente (PDF «Instrucciones Claude») resueltas con las medidas del Figma vivo: frames MENU DESPLEGABLE 6694:2103 y TELECOM-SERVICIOS 6595:17 del archivo wj0iCFjLqkStnSXzunXK0g. ========================================================================== */ /* 1 · El botón de menú, al tamaño del aspa de cierre ----------------------- En el Figma la hamburguesa mide 32 px sobre el lienzo de 2000 (1,6 %) y el aspa 44,91 (2,25 %): de ahí que se leyera más pequeña. El cliente pide que sean equivalentes, así que la hamburguesa sube al ancho del aspa conservando su proporción 2:1. Desde el 27-sep-2026 mandan las medidas del bloque 12. */ .menu-boton { width: clamp(30px, 2.25vw, 45px); height: clamp(16px, 1.13vw, 23px); gap: clamp(4px, 0.39vw, 8px); align-content: center; } .menu-boton span:not(.solo-lectores) { height: clamp(2px, 0.13vw, 3px); } .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(clamp(4px, 0.39vw, 8px) + clamp(2px, 0.13vw, 3px))) rotate(45deg); } .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-1 * (clamp(4px, 0.39vw, 8px) + clamp(2px, 0.13vw, 3px)))) rotate(-45deg); } /* 2 · Los sellos del menú, como en el Figma -------------------------------- Barcelona Turisme mide 243,6 sobre 2000 (12,18 %) y World Federation 248,4 (12,42 %); estaban los dos al 8,5 %. Entre ellos hay 74,3 px (3,71 %). Su base cae en la misma línea que la última entrada del menú (1508 y 1510 en el frame), así que los dos bloques se alinean por abajo. El panel cierra por la derecha en el 93,3 % y abre en el 11,1 %. */ .menu-panel { padding-right: clamp(20px, 6.72vw, 134px); padding-left: clamp(20px, 11.1vw, 222px); padding-bottom: clamp(28px, 10.25vw, 205px); } .menu-panel__nav { grid-column: 1; align-self: end; padding-block: 0; } .menu-panel__sellos { grid-row: 2; grid-column: 2; align-self: end; gap: clamp(11px, 2.78vw, 56px); } /* 29-09-2026 · Revisión de diseño (Marta): los sellos se leían demasiado grandes junto al menú, que desde el 27-sep va a cuerpo mayor. Bajan un 25 % sobre la medida del Figma, conservando su proporción entre ellos y la separación relativa: Barcelona Turisme 9,14 % y World Federation 9,32 % del ancho (antes 12,18 y 12,42), 2,78 % entre ambos (antes 3,71). A 1440 de ventana: 132 y 134 px, antes 175 y 179. */ .menu-panel__sellos svg { width: clamp(78px, 9.14vw, 183px); } .menu-panel__sellos svg + svg { width: clamp(80px, 9.32vw, 187px); } @media (max-width: 700px) { .menu-panel { padding-left: var(--gutter-min); padding-right: var(--gutter-min); padding-bottom: 28px; } .menu-panel__nav { grid-column: 1 / -1; align-self: center; padding-block: 12px; } .menu-panel__sellos { grid-row: 3; grid-column: 1 / -1; align-self: end; gap: clamp(8px, 2.8vw, 18px); } /* En el teléfono, el mismo 25 % menos (29-09): 70 px a 390 de ancho. */ .menu-panel__sellos svg, .menu-panel__sellos svg + svg { width: clamp(60px, 18vw, 105px); } } /* 3 · Telecom: la proporción de las pastillas ------------------------------ En el Figma cada pastilla mide 585 x 679 sobre el lienzo de 2000. El ancho (29,25 %) y la separación (2,35 %) ya eran correctos; la altura la fijaba el texto y salían un 8 % más bajas de lo aprobado. Con la altura mínima atada al ancho, las cinco miden lo mismo y guardan la proporción. */ .tarjetas-bloque--carrusel .tarjeta { min-height: calc(clamp(260px, 29.25vw, 585px) * 679 / 585); } /* 4 · Tildes de mayúscula en los titulares que aparecen por líneas --------- La Ñ de «DISEÑADO» salía cortada en Eventos: la caja de línea se recorta con overflow:clip y el interlineado de 0,95 deja la virgulilla fuera. Se abre la caja por arriba y se compensa con el mismo margen negativo, así que el ritmo tipográfico no cambia y el recorte de la animación —que trabaja por abajo— sigue igual. Afecta a toda la web. */ @supports (overflow: clip) { .linea { /* Ampliado de 0,16 a 0,22em el 3-sep: Saira levanta más los acentos de las mayúsculas que la tipografía anterior (0,917 del cuerpo frente a 0,868) y la Ñ se habría vuelto a cortar. */ padding-top: 0.22em; margin-top: -0.22em; } } /* ========================================================================== CORRECCIONES 03-09-2026 Peticiones del cliente (PDF «Instrucciones Claude» del 3 de septiembre), resueltas con las medidas del Figma vivo: archivo wj0iCFjLqkStnSXzunXK0g, frames HOME 6567:40 y TELECOM-SERVICIOS 6595:17. ========================================================================== */ /* 5 · TELECOM · el rótulo de las pastillas ya no pisa el pictograma --------- Con la tipografía correcta el rótulo vuelve al cuerpo del diseño (--fs-h3, 83,6 sobre el lienzo de 2000) y «MANTENIMIENTO» cabe en una línea, como en el frame. Lo que quedaba por arreglar es la geometría del pictograma: en el Figma mide 86 x 126 sobre la pastilla de 585 y se apoya a 58 del borde derecho y 91 del superior; estaba en una caja CUADRADA de 5,9vw, que lo dejaba corto y comía sitio al rótulo. Va en unidades de contenedor y no en vw porque la pastilla es clamp(260px, 29.25vw, 585px): con vw, la composición interior se descuadra justo donde la pastilla deja de encoger (alrededor de 890 px de ventana). Así todo lo de dentro es proporción de la propia pastilla y se comporta igual a cualquier ancho, teléfono incluido. */ .tarjetas-bloque--carrusel .tarjeta{ container-type: inline-size; } .tarjetas-bloque--carrusel .tarjeta__icono{ top: 20.4cqi; /* 91 / 441 del ancho útil de la pastilla */ right: 13.15cqi; /* 58 / 441 */ width: 19.5cqi; /* 86 / 441 */ height: 28.6cqi; /* 126 / 441 */ } /* El dibujo se apoya en el borde derecho de su caja: los pictogramas estrechos no dejan hueco muerto delante del rótulo. */ .tarjetas-bloque--carrusel .tarjeta__icono img{ object-position: right center; } .tarjetas-bloque--carrusel .tarjeta__titulo{ font-size: var(--fs-h3); /* El rótulo se detiene donde empieza el pictograma, con la calle del frame. Red de seguridad para rótulos futuros más largos: antes de pisar el pictograma, la palabra se parte. */ max-width: 80cqi; overflow-wrap: break-word; } /* 6 · INICIO · el plano topográfico de Norman Foster, a la tinta del diseño - La pieza anterior estaba reteñida a mano y llevaba un 85 % de opacidad para compensarlo. La que envía el cliente ya viene con la tinta del Figma. */ .composicion__dibujo{ opacity: 1; } /* 7 · EL MIRADOR · el fondo de página del diseño --------------------------- La imagen que envía el cliente es el fondo de la mitad inferior del frame: blanco puro hasta el 64 % de su altura y atardecer con la Torre en el 36 % restante. En el Figma cae desde el final del hero hasta el pie, y sobre su parte blanca se apoyan la galería y el bloque de «Comprar entradas». La sección de cierre la sirve con su proporción (95 % del ancho) y el encuadre anclado ABAJO: así el atardecer queda completo sobre el pie y la parte blanca de la fotografía se funde sin costura con la sección de encima. El titular cae sobre la zona clara, como en el frame. */ body.page-id-93 .seccion--foto.seccion--encuadrada .seccion__fondo img{ object-position: center bottom; } /* ========================================================================== RENDIMIENTO 03-09-2026 Entrega de imágenes en WebP y AVIF con ShortPixel. ========================================================================== */ /* 8 · La etiqueta no puede alterar la maquetación ----------------- ShortPixel sirve los formatos nuevos envolviendo cada en un . Ese envoltorio es un elemento EN LÍNEA, así que se interpone entre el contenedor y la imagen: todas las reglas que dan a la fotografía la altura de su caja —.seccion__fondo img y .tarjeta__icono img, que van a height:100%— dejarían de resolver, y los fondos de sección y los pictogramas de Telecom se vendrían abajo. Es el fallo clásico de este modo de entrega y por eso el propio plugin avisa de que hay que probarlo. Con display:contents el no genera caja: la imagen sigue siendo, a efectos de maquetación, hija directa de su contenedor. La web se ve exactamente igual con la entrega activada que sin ella, y la regla es inofensiva si algún día se desactiva ShortPixel. */ picture{ display: contents; } /* ========================================================================== PÁGINAS LEGALES 13-09-2026 Textos que envía el cliente para Aviso legal, Política de privacidad y Política de cookies. Van en el editor de WordPress —no en las secciones ACF— porque son documentos largos, se revisan seguido y así quedan con historial de revisiones y al alcance de cualquiera del equipo. page.php ya los sirve dentro de «.contenedor--estrecho.texto-editor»; lo que faltaba era el estilo de documento, que sirve además para cualquier página futura que se escriba en el editor. ========================================================================== */ /* 9 · El cuerpo del editor, compuesto como un documento -------------------- El cuerpo editorial del sitio son 25 px sobre el lienzo de 2000 y está pensado para párrafos de tres líneas sobre fotografía. Un texto legal de quince mil caracteres a ese cuerpo se lee a tirones, así que baja al cuerpo de dato —19 px, el mismo de la dirección del pie— con el suelo en 16 px: por debajo de eso un documento largo no se lee en un teléfono, y 16 px es el cuerpo que ya tiene el resto del sitio en esa pantalla. La medida va en «ch» y no en porcentaje del lienzo, porque lo que tiene que quedar constante aquí no es la proporción del diseño sino la línea de lectura: unos 70 caracteres a cualquier ancho. El tope de 1100 px de «.contenedor--estrecho» se respeta, así que en pantallas muy grandes la caja no crece más de lo que ya crecía. */ .texto-editor { font-size: clamp(1rem, 0.95vw, 19px); /* El 300 del sitio adelgaza demasiado a este cuerpo y sobre el crema pierde contraste real: el documento va en regular. */ font-weight: var(--w-regular); line-height: 1.6; text-align: left; } .texto-editor.contenedor--estrecho { max-width: min(1100px, calc(60ch + 2 * var(--gutter))); } /* Los epígrafes del documento no son titulares de sección: el reinicio del tema pone h1-h3 en la display condensada y en versales, y «¿Qué datos personales recabamos?» se leía como un rótulo de portada. Aquí vuelven a la tipográfica de texto, en caja baja. */ .texto-editor :is(h2, h3) { font-family: var(--font-text); font-variation-settings: normal; text-transform: none; letter-spacing: 0; line-height: 1.25; } .texto-editor h2 { font-size: 1.24em; font-weight: var(--w-semibold); margin-block: 2em 0.7em; } .texto-editor h3 { font-size: 1em; font-weight: var(--w-semibold); margin-block: 1.6em 0.4em; } /* El primer epígrafe no necesita aire propio: ya lo pone la sección. */ .texto-editor > :is(h2, h3):first-child { margin-block-start: 0; } /* Listas. El tema las deja sin marca porque en el diseño no hay ninguna; en un texto legal la enumeración es parte del sentido. */ .texto-editor :is(ul, ol) { margin-block: 0.8em 1.2em; padding-inline-start: 1.4em; } .texto-editor ul { list-style: disc; } .texto-editor ol { list-style: decimal; } .texto-editor li { margin-block-end: 0.5em; } .texto-editor strong { font-weight: var(--w-semibold); } /* El filete del enlace baja un pelo para no tocar las descendentes. */ .texto-editor a { padding-bottom: 0.06em; } /* Tablas. La única del sitio es el inventario de cookies de la política, y está pensada para crecer: reglas horizontales en lugar de rejilla cerrada, que es como se compone una tabla de datos en un documento sobrio. */ .texto-editor table { width: 100%; margin-block: 1.4em; border-collapse: collapse; font-size: 0.92em; text-align: left; } .texto-editor :is(th, td) { padding: 0.7em 0.9em 0.7em 0; border-bottom: 1px solid var(--c-linea); vertical-align: top; /* «break-word» y no «anywhere»: parte la palabra solo cuando de verdad no cabe. Con «anywhere», el nombre de la cookie contaba como un carácter de ancho mínimo y el navegador le daba a esa columna 50 px, partiendo «tcs_consentimiento» en dos aunque hubiera sitio de sobra. */ overflow-wrap: break-word; } .texto-editor :is(th, td):last-child { padding-right: 0; } .texto-editor th { font-weight: var(--w-semibold); border-bottom-color: currentColor; } .texto-editor code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; } @media (max-width: 700px) { /* En un teléfono cuatro columnas no caben con holgura: se aprieta el aire y se deja que el texto de cada celda fluya, que es más legible que obligar a desplazar la tabla en horizontal. */ .texto-editor table { font-size: 0.85em; } .texto-editor :is(th, td) { padding: 0.55em 0.5em 0.55em 0; } } /* ========================================================================== DIRECCIÓN 27-09-2026 Tres peticiones de dirección: que el pie se lea, que el menú desplegable sea más grande y compacto (referencia: el menú de mariona.net) y que el logotipo y el botón de menú estén siempre a la vista, algo mayores. El bloque 10 (la letra pequeña del pie en Inter) se RETIRA el 29-09-2026: diseño pide la tipografía del Figma en todo el pie. El pie vuelve a pie.css, que es su sitio, con un suelo de 12 px en la línea legal para conservar lo que buscaba este bloque. Si se quisiera recuperar Inter, su versión está en la copia de seguridad del puente del 27-09 (ajustes.css · 20260927-175154_bak_ajustes.css_073ef380). ========================================================================== */ /* 11 · EL MENÚ DESPLEGABLE · más grande y sin aire entre entradas ----------- El menú de mariona.net apila las entradas sin hueco, con el interlineado justo por debajo del cuerpo (108 px e interlineado 0,94 a 1440 de ancho): el blanco entre renglones es el de la propia letra. Aquí igual. Como las entradas van en versales, que no tienen ascendentes ni descendentes, el interlineado baja a 0,92 para dar la misma densidad. El cuerpo lo decide el sitio que hay. Las seis entradas tienen que caber entre la marca y el margen inferior del panel sin desplazar, así que --menu-libre calcula ese alto con las mismas medidas del panel —margen superior, marca y margen inferior— y el cuerpo es una sexta parte (seis entradas a 0,92 más medio renglón de aire). Con eso sale a 97 px en un portátil de 1440 × 900 (antes 56), a 60 en uno de 1366 × 657 útiles y a 31 en un teléfono apaisado, siempre entero. El techo de 7,5vw es la proporción de la referencia. Si algún día el menú tiene más de seis entradas, no se monta sobre la marca: el panel pasa a desplazarse (alineación «safe»). Saira se queda aquí: a 60-100 px es letra de titular, que es donde una condensada luce. El interlineado va también en el
  • : el enlace es un bloque en línea y, sin esto, el renglón del
  • seguía midiendo el interlineado de cuerpo de texto de la web y volvía a abrir el hueco. */ .menu-panel { --menu-libre: calc(100vh - 3.95vw - clamp(84.5px, 7.7vw, 154px) - clamp(28px, 10.25vw, 205px)); } @supports (height: 100svh) { .menu-panel { --menu-libre: calc(100svh - 3.95vw - clamp(84.5px, 7.7vw, 154px) - clamp(28px, 10.25vw, 205px)); } } .menu-panel__nav { align-self: safe end; } .menu-panel ul { gap: 0; font-size: clamp(1.5rem, min(7.5vw, var(--menu-libre) / 6), 150px); line-height: 0.92; } .menu-panel a { line-height: 0.92; letter-spacing: -0.01em; } @media (max-width: 700px) { /* En el teléfono Saira es tan estrecha que el ancho sobra («EL MIRADOR» ocupa la mitad de la línea): manda el alto. 232 px son el margen superior, la marca, los sellos y el margen inferior del panel. */ .menu-panel__nav { align-self: safe center; } .menu-panel ul { font-size: min(18vw, 6rem); gap: 0; } @supports (height: 100svh) { .menu-panel ul { font-size: min(18vw, (100svh - 232px) / 6, 6rem); } } } /* 12 · LA CABECERA · siempre a la vista, algo mayor -------------------------- Hasta hoy la barra iba anclada arriba de la página y se iba con el scroll. Ahora acompaña: la marca y el botón de menú están siempre en su sitio. El resto de la franja no captura el puntero, para que lo que pasa por debajo siga siendo clicable. El color deja de ser fijo. Blanca sobre la portada y negra en el resto funcionaba mientras la barra se quedaba arriba; al acompañar pasa por encima de fotografías, crema, blanco y negro. main.js mira qué hay detrás de cada icono y le pone el tono que se lee ahí («Cabecera fija» en ese archivo): claro sobre oscuro, oscuro sobre claro y, sobre fotografía, una sombra muy suave que lo separa del cielo. Sin JavaScript nadie puede hacer esa lectura, así que la barra se queda donde estaba, arriba de la página y con su color de siempre. */ .barra { position: fixed; pointer-events: none; } .barra a, .barra button { pointer-events: auto; } .no-js .barra { position: absolute; } .barra__marca, .menu-boton { transition: color 320ms var(--ease-out), filter 320ms var(--ease-out); } .barra__marca[data-tono^="claro"], .menu-boton[data-tono^="claro"] { color: var(--c-over); } .barra__marca[data-tono^="oscuro"], .menu-boton[data-tono^="oscuro"] { color: var(--c-ink); } .barra__marca[data-tono="claro-foto"], .menu-boton[data-tono="claro-foto"] { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.3)); } /* Entre un 15 y un 20 % mayores. La marca del panel va a la misma medida para que el isotipo no cambie de tamaño al abrir el menú. */ .barra__marca, .menu-panel__marca { width: clamp(34px, 3.1vw, 62px); } /* El botón de menú: más ancho y con más trazo, en píxeles enteros para que las líneas salgan nítidas en cualquier pantalla; el aspa en que se convierte al abrir sale de las mismas medidas. Y el área de toque llega a 44 px aunque el dibujo sea más pequeño. */ .menu-boton { --trazo: 2px; --hueco: 7px; position: relative; width: clamp(34px, 2.6vw, 52px); height: calc(3 * var(--trazo) + 2 * var(--hueco)); gap: var(--hueco); } @media (min-width: 1200px) { .menu-boton { --trazo: 3px; } } @media (min-width: 1800px) { .menu-boton { --hueco: 9px; } } .menu-boton span:not(.solo-lectores) { height: var(--trazo); } .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--hueco) + var(--trazo))) rotate(45deg); } .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-1 * (var(--hueco) + var(--trazo)))) rotate(-45deg); } .menu-boton::after { content: ""; position: absolute; inset: -14px -10px; } /* En el teléfono el aspa de «cerrar» del panel se quedaba en 30 px de caja y trazo fino: pasa a la medida del botón de menú, que es el que sustituye. */ @media (max-width: 700px) { .menu-panel__cerrar { width: 36px; } } /* Al imprimir, una cabecera fija se repetiría en cada hoja. */ @media print { .barra { position: absolute; } } /* ========================================================================== REVISIÓN DE DISEÑO 29-09-2026 (Marta) Correo «Torre de Collserola · mejoras». El pie (ancho, tipografía e iconos) está en pie.css y movil.css; el imán de los botones se retira en movimiento.js; el cuerpo de los sellos del menú, en el bloque 2. ========================================================================== */ /* 13 · CONTACTO · correos y teléfono en Inter Medium ------------------------ Iban en la tipografía de texto pero con dos pesos que no son de la guía: el correo en negrita (700) y el teléfono en ligera (300). El diseño los quiere iguales y en Inter Medium (el peso de los botones en la guía de estilos); el texto corrido sigue en Inter Light. */ .via__dato { font-family: var(--font-text); font-weight: var(--w-medium); } .via__rotulo + .via__dato a { font-weight: inherit; } /* 14 · TITULARES · el espaciado de Saira, sin apretar ---------------------- La prosa negativa de los titulares (−0,01em en H1, −0,02em en H2) venía de la tipografía anterior. Saira tiene la L con el pie hasta el borde de su caja: con cualquier prosa negativa, LA, LS y LL se tocan («COLLSEROLA», «LA HISTORIA», «LA SOCIEDAD»…). A 0 cada pareja respeta el espaciado y el kerning del propio tipo. Comprobado a 1280, 1440 y 1920: ningún titular cambia de número de líneas ni desborda. El titular de portada de Inicio lo gobierna --tracking-hero (tokens.css). En el teléfono el H2 se queda como estaba: «INFRAESTRUCTURA,» ya llena la línea y a 0 desbordaría; a ese cuerpo el contacto no se aprecia. Las pastillas del carrusel de Telecom NO cambian: «MANTENIMIENTO» cabe con 4 px de holgura y a 0 se saldría de la pastilla. */ h1, .h1 { letter-spacing: 0; } @media (min-width: 701px) { h2, .h2 { letter-spacing: 0; } } .tarjetas-bloque:not(.tarjetas-bloque--carrusel) .tarjeta__titulo { letter-spacing: 0; } /* 15 · Ningún botón se mueve: al pasar por encima solo cambia el color ----- Los mandos del vídeo entraban con un desplazamiento de 6 px y se encogían al pulsarlos. Ahora aparecen solo con la opacidad. */ .video-mando:active { transform: none; } @media (hover: hover) and (pointer: fine) { .video-bloque__mandos, .video-bloque__marco:hover .video-bloque__mandos, .video-bloque__marco:focus-within .video-bloque__mandos { transform: none; } }