y NO pinta ni migas ni cabecera: manda la composición de bloques. Aquí solo se prepara el LIENZO: contenido a sangre, sin gutter ni max-width heredados. Los anchos y los paddings de cada sección los pone el CONTENEDOR DE SPECTRA (legacy) dentro del cual va cada bloque; los bloques de Spora no llevan caja propia y ocupan el 100% de lo que ese contenedor les dé. ============================================================================ */ /* Contenido a sangre: cada contenedor de Spectra se pinta a ancho completo y se encarga por su cuenta de fondo, márgenes y paddings. */ .spora-servei--blocs .spora-servei__content { max-width: none; margin: 0; padding: 0; } /* Los bloques traen sus propios márgenes verticales: el

no añade separación por arriba (el hero arranca pegado a la cabecera del sitio). */ .spora-servei--blocs { margin-top: 0; } /* ============================================================================ SINGLE DE PROJECTE EMPRESA — lienzo base de las fichas por bloques ---------------------------------------------------------------------------- El single d'Empresa se compone con CONTENEDORES DE SPECTRA insertados en el contenido de cada projecte, con bloques de Spora dentro (las cites son spora/scroll-opacity-text y el índice es spora/anchor-flotante). single-projecte.php marca esas fichas con .spora-projecte--blocs en el

y no pinta migas desde la plantilla: las lleva dentro el hero, centradas con el título. Aquí solo se prepara el LIENZO: contenido a sangre, sin gutter ni max-width heredados. Los anchos, fondos y paddings de cada sección los pone el contenedor de Spectra correspondiente (igual que en las fichas de servei); los bloques de Spora no llevan caja propia y ocupan el 100% de lo que ese contenedor les dé. ============================================================================ */ /* Contenido a sangre: cada contenedor de Spectra se pinta a ancho completo y se encarga por su cuenta de fondo, márgenes y paddings. */ .spora-projecte--blocs .spora-projecte__content { max-width: none; margin: 0; padding: 0; } /* Los contenedores traen sus propios márgenes verticales: el

no añade separación por arriba (el hero arranca pegado a la cabecera del sitio). */ .spora-projecte--blocs { margin-top: 0; } /* (.hentry { margin-bottom: 0 } ya está declarado más abajo, global.) */ /* ============================================================================ Ficha de projecte — hero editorial centrado (LAS DOS ÁREAS) ---------------------------------------------------------------------------- Estructura en template-parts/projecte-header.php: migas (con el servei) + título + cliente + subtítulo, apilados y centrados, y debajo la imagen destacada. Empresa y Administració comparten TODO el hero. Lo único que cambia es el formato de la imagen, marcado en el

: · .spora-projecte-hero__media--empresa -> casi a sangre (formato de base). · .spora-projecte-hero__media--admin -> cuadrada de 320x320, centrada. El

es HERMANO del

, no hijo: es lo que permite que la cabecera se quede fija en toda la ficha (ver «Cabecera FIJA» más abajo). Sin imagen destacada no se pinta y no se reserva hueco. ============================================================================ */ .spora-projecte-hero__head { box-sizing: border-box; width: 100%; max-width: 1440px; margin-inline: auto; /* padding-top (no margin en las migas) para que el hueco superior viaje dentro de la caja cuando el bloque se queda fijo; ver __breadcrumbs. */ padding: clamp(56px, 7vw, 100px) clamp(32px, 5vw, 72px) 0; text-align: center; } /* Las migas ya vienen centradas por 'align' => 'center'; aquí solo el aire. OJO: el hueco de ARRIBA lo pone el padding-top del __head, no el margin de las migas. Con margin, al ser el primer hijo, se colapsaba FUERA de la caja del __head: al pegarse arriba (sticky) ese hueco desaparecía de golpe y las migas daban un salto. Como padding va dentro de la caja y viaja con ella. */ .spora-projecte-hero__breadcrumbs { margin: 0 0 clamp(24px, 3vw, 40px); } .spora-projecte-hero__title { margin: 0 auto; /* Rotura natural a dos líneas: se limita la medida y se equilibran las líneas, en vez de meter un
a mano en el título del post. */ max-width: 30ch; /* Geist Light, no la display. El !important es necesario, no decorativo: hay una regla global `h1 { font-family: var(--spora-font-family-display) !important }` (más arriba en esta hoja) y un selector de clase la pierde. Mismo caso que la excepción de h4. */ font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; font-size: 48px; font-weight: 300; line-height: 100%; letter-spacing: -1px; text-wrap: balance; color: var(--spora-color-primary-dark-green); } .spora-projecte-hero__client { margin: 15px 0 0; font-size: var(--spora-text-caption-regular-size); font-weight: 500; text-transform: uppercase; color: var(--spora-color-primary-dark-green); } /* Subtítulo (campo ACF `subtitol`), en la serif display y gris. Ocupa el hueco donde antes iban los serveis relacionats, que ahora van en las migas. Medida corta + balance para que rompa en dos líneas parejas, como en el diseño. */ .spora-projecte-hero__subtitol { max-width: 44ch; margin: 15px auto 0; font-family: var(--spora-font-family-display); font-size: var(--spora-text-body-regular-size); font-weight: 300; line-height: 1.25; text-wrap: balance; color: var(--spora-color-neutral-black-40); } /* Imagen destacada: casi a sangre, con márgenes laterales pequeños. Es el formato de EMPRESA y el de base; Administració lo pisa más abajo. */ .spora-projecte-hero__media { margin: clamp(40px, 8vw, 140px) 0 0; padding-inline: 32px; } .spora-projecte-hero__img { display: block; width: 100%; height: auto; border-radius: var(--spora-radius-card); } /* --- Administració: imagen cuadrada de 320x320, centrada ------------------ Único cambio de formato entre las dos áreas; todo lo demás del hero (y la plantilla, y el lienzo) es idéntico. Se recorta con object-fit en vez de deformar, así que sirve cualquier proporción de origen. El área se marca en el propio

(__media--admin) y NO se hereda del

: el

va fuera del

para que la persiana funcione (ver «Cabecera FIJA» más abajo), así que un selector de descendencia desde .spora-projecte-hero--admin no lo alcanzaría. */ .spora-projecte-hero__media--admin { display: flex; justify-content: center; } .spora-projecte-hero__media--admin .spora-projecte-hero__img { width: 320px; /* En pantallas más estrechas que la propia imagen manda el ancho disponible; con object-fit sigue recortando y no se deforma. */ max-width: 100%; height: 320px; object-fit: cover; } /* --- Cabecera FIJA — EFECTO PERSIANA --------------------------------------- La cabecera (migas + título + cliente + subtítulo) se queda QUIETA y no se mueve NUNCA en toda la ficha. Primero sube la imagen destacada por encima, y después el contenido, que ya la tapa del todo. Como una persiana. Es el espejo del efecto del footer (.spora-footer-reveal), pero aquí no hace falta clip-path ni track: basta position:sticky y apilado explícito. ·

-> sticky, z-index 0: se queda pegado. · __media -> position:relative, z-index 1 y SIN FONDO: sube la imagen sola por encima de la cabecera. Nada de fondo opaco aquí, o se vería subir un bloque blanco en vez de la imagen. · content -> position:relative, z-index 1 y FONDO OPACO: es lo que tapa la cabecera de verdad. El fondo es imprescindible; sin él el texto de la cabecera se vería por los huecos entre secciones. DÓNDE ESTÁ EL TRUCO: el sticky lo limita el PADRE del elemento pegado, y el padre del

es el

—toda la ficha—, así que aguanta hasta el final. Para eso el

de la imagen tiene que ir FUERA del

(ver template-parts/projecte-header.php). Cuando estaba dentro, el padre era el

, que crecía con la imagen, y la cabecera se soltaba en cuanto la imagen acababa de pasar: el efecto solo se veía al principio. Sin imagen destacada no hay

ni hueco reservado, y la tapa directamente el contenido. Mismo CSS, sin caso especial. Lo único que el CSS no puede calcular es DÓNDE pegarse: lo publica Spora.projecteStickyHead en --spora-hero-head-top (ver assets/js/utils.js). */ .spora-projecte-hero { position: sticky; /* Se pega EN SU SITIO: --spora-hero-head-top es la distancia natural del hero al top del documento (la barra del sitio, que va en flujo), medida por Spora.projecteStickyHead. Así la cabecera no se mueve NI UN PÍXEL al hacer scroll; con top:0 subiría primero hasta el borde y solo entonces se quedaría, y se vería el salto. */ top: var(--spora-hero-head-top, 0px); z-index: 0; } .spora-projecte-hero__media { position: relative; z-index: 1; } .spora-projecte--blocs .spora-projecte__content { position: relative; z-index: 1; background-color: var(--spora-color-neutral-white, #FFFFFF); } /* --- Administració: FUNDIDO en el borde superior del contenido ------------- Con la imagen pequeña (320x320) quedan a los lados grandes huecos por donde se ve la cabecera fija, y el borde recto del fondo blanco del contenido se veía CORTANDO el texto al subir (petición del 2026-09-30). Se sustituye ese corte por un degradado transparente -> blanco pegado encima del contenido. El degradado es un ::before del contenido que sobresale POR ARRIBA (bottom:100%), así que se solapa con el

sin mover nada de sitio. Para que no lave la parte baja de la foto, el

sube a z-index 2: la imagen queda por encima del degradado y este solo se ve a sus lados, sobre la cabecera. En Empresa no hace falta: la imagen va casi a sangre y ya tapa la cabecera de lado a lado. */ .spora-projecte--administracio .spora-projecte-hero__media { z-index: 2; } .spora-projecte--administracio { --spora-projecte-fade-h: clamp(96px, 12vw, 180px); } .spora-projecte--administracio.spora-projecte--blocs .spora-projecte__content::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--spora-projecte-fade-h); background: linear-gradient( to bottom, rgba(255, 255, 255, 0), var(--spora-color-neutral-white, #FFFFFF) ); pointer-events: none; } /* SIN IMAGEN DESTACADA (bug del 2026-10-03): el fundido sobresale por arriba del contenido, y sin el

de por medio caía JUSTO encima del título y el cliente y los dejaba medio borrados en reposo. Se separa el contenido exactamente la altura del fundido: en reposo el degradado queda sobre el hueco vacío y, al hacer scroll, sigue tapando la cabecera con el mismo fundido. Con imagen no cambia nada. La clase la pone single-projecte.php. */ .spora-projecte--administracio.spora-projecte--sense-imatge .spora-projecte__content { margin-top: var(--spora-projecte-fade-h); } /* En MÓVIL se desactiva, igual que el reveal del footer (<=767px): la cabecera apilada ocupa casi toda la pantalla y el efecto se come la ficha. Sin persiana tampoco hay corte que disimular, así que fuera el fundido (y el hueco que se le reserva cuando no hay imagen). */ @media (max-width: 767px) { .spora-projecte-hero { position: static; } .spora-projecte--administracio.spora-projecte--blocs .spora-projecte__content::before { content: none; } .spora-projecte--administracio.spora-projecte--sense-imatge .spora-projecte__content { margin-top: 0; } } /* ============================================================================ Ficha de projecte d'agència (CPT `agencia`) — hero de projecte en OSCURO ---------------------------------------------------------------------------- template-parts/agencia-header.php reutiliza el marcado y las clases del hero de projecte (layout centrado, imagen casi a sangre y cabecera FIJA con persiana, todo lo de arriba), así que aquí solo va lo que cambia: · Tipografía del diseño (2026-10-01), siempre: migas Geist 300 12px / 1.3 / 0 título Geist 300 48px / 0.9 / -1% cliente Geist 600 14px / 1.3 / 0 subtítol Geist 400 14px / 1.3 / 0 (pegado debajo del cliente) · Colores (migas en groc Spora, título blanco, meta en blanco al 40%): SOLO con body.spora-dark-mode. Las agències nacen en oscuro (inc/dark-mode.php), pero si alguien lo desactiva en una ficha no puede quedar texto blanco sobre fondo blanco: cae a los colores del projecte. ============================================================================ */ .spora-projecte-hero--agencia .spora-projecte-hero__breadcrumbs { font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; letter-spacing: 0; } .spora-projecte-hero--agencia .spora-projecte-hero__title { /* La familia (Geist con !important) ya la pone .spora-projecte-hero__title. */ line-height: 0.9; letter-spacing: -0.01em; } .spora-projecte-hero--agencia .spora-projecte-hero__meta { margin-top: 32px; } .spora-projecte-hero--agencia .spora-projecte-hero__client, .spora-projecte-hero--agencia .spora-projecte-hero__subtitol { max-width: none; margin: 0; font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.3; letter-spacing: 0; text-transform: uppercase; } .spora-projecte-hero--agencia .spora-projecte-hero__client { font-weight: 600; } .spora-projecte-hero--agencia .spora-projecte-hero__subtitol { font-weight: 400; } /* --- Imagen destacada: mismo formato que en projectes d'Empresa --- En Empresa el alto sale de la propia foto (height:auto), y allí se suben apaisadas de 1376x641. En agència se reaprovechan las fotos de las tarjetas, que son cuadradas (874x874), y a todo el ancho salían casi tan altas como anchas (2026-10-01). Se fija la proporción de Empresa y se recorta con object-fit, así cualquier foto queda igual. El selector va por el

porque el

está FUERA del

(ver agencia-header.php). */ .spora-projecte--agencia .spora-projecte-hero__img { aspect-ratio: 1376 / 641; object-fit: cover; } /* --- Colores en modo oscuro --- */ body.spora-dark-mode .spora-projecte-hero--agencia .spora-projecte-hero__breadcrumbs { color: var(--spora-color-accent-yellow); } body.spora-dark-mode .spora-projecte-hero--agencia .spora-projecte-hero__title { color: var(--spora-dark-ink); } body.spora-dark-mode .spora-projecte-hero--agencia .spora-projecte-hero__client, body.spora-dark-mode .spora-projecte-hero--agencia .spora-projecte-hero__subtitol { color: rgba(255, 255, 255, 0.4); } /* El contenido es lo que TAPA la cabecera fija y por eso lleva fondo opaco blanco (ver «Cabecera FIJA»). En una ficha oscura ese blanco se vería como una franja: pasa al fondo oscuro de la página. Vale para cualquier ficha por bloques en modo oscuro, no solo agències. */ body.spora-dark-mode .spora-projecte--blocs .spora-projecte__content { background-color: var(--spora-dark-bg); } .hentry { margin-bottom: 0 !important; } /* ========================================================================= SCROLL SUAVE GLOBAL (Lenis) ========================================================================= Hoja de estilos mínima que necesita Lenis (dist/lenis.css, vendorizada aquí para no añadir otra petición). La librería se encola en functions.php y arranca en assets/js/utils.js -> Spora.smoothScroll(); mientras está activa, marca con .lenis / .lenis-smooth / .lenis-scrolling / .lenis-stopped. - height:auto en html/body: Lenis necesita que el documento crezca con su contenido (un alto fijo del 100% rompería el cálculo del recorrido). - .lenis-stopped: bloquea el scroll cuando se llama a lenis.stop(). - [data-lenis-prevent]: zonas con su propio scroll interno (p. ej. el modal de guías o la ficha del bloque expertise-map). Lenis ignora ahí el gesto y lo deja al navegador; overscroll-behavior evita que el rebote arrastre la página. - iframes inertes mientras se scrollea: si no, se comen el gesto y el desplazamiento se detiene al pasar por encima (mapas, vídeos embebidos). ========================================================================= */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /* ========================================================================= PÀGINA D'ENTRADES — llistat d'insights · .spora-insl ------------------------------------------------------------------------- Estils del template-part `template-parts/insights-llistat.php`, que pinta el cos de la pàgina d'entrades (home.php): barra de filtres per categoria + cercador, i graella de targetes d'insight. FONS I CONTENIDOR. La secció replica el contenidor «fons» del disseny (un uagb/container a sang): ample complet, degradat vertical de transparent a negre 5%, marge superior de 150px i 32px de padding lateral (10px en mòbil). LA TARGETA NO ÉS AQUÍ. Les seves regles (i les de la graella que les col·loca, amb les variables afinables: alçada, gap, columnes, ample de la imatge) viuen a `blocks/_shared/insight-card.css`, perquè les comparteix amb el bloc «Insights destacats» i han de sortir idèntiques. Aquí queda només el que és PROPI d'aquesta pàgina: el fons i l'aire de la secció. La barra de filtres, el cercador i l'estat buit són a `blocks/_shared/filter-bar.css` (els comparteix amb els blocs de projectes). Interacció: · Filtres: subratllat animat del tema (.spora-text-link--hover, veure la secció «ENLACE DE TEXTO» d'aquest mateix fitxer). L'actiu el manté fix. · Cercador: es veu «fluix» fins que s'enfoca o té text (.is-filled). ========================================================================= */ /* --- Secció de la pàgina d'entrades (fons i aire) ------------------------ Només .spora-insl: el bloc no pinta fons ni aire de secció (el posa el contenidor de Spectra on el col·loquin). */ .spora-insl { /* Fons de secció, en TRES trams verticals: 1. Entrada: de transparent (el blanc de la capçalera) al gris inicial. Ocupa exactament l'aire de sobre del contingut, de manera que el gris no arrenca amb un cantell dur sota el header: hi entra fonent-se. 2. Gris inicial, just on comença la barra de filtres. 3. D'aquí a baix s'enfosqueix molt poc, prou perquè es noti la caiguda i les targetes blanques retallin, sense que el peu es vegi brut. Els extrems són negre amb molt poca opacitat, així el degradat funciona sobre qualsevol fons de pàgina. */ --spora-insl-bg-top: rgba(0, 0, 0, 0.03); --spora-insl-bg-bottom: rgba(0, 0, 0, 0.06); --spora-insl-bg: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0, var(--spora-insl-bg-top) var(--spora-insl-fade-top), var(--spora-insl-bg-bottom) 100% ); /* Alçada del tram d'entrada (el fos blanc -> gris). És alhora l'aire que queda sobre la barra de filtres: el fos i l'aire són el mateix tram, per això és padding i no margin —amb margin el degradat començaria per sota i el cantell tornaria a veure's. */ --spora-insl-fade-top: 150px; /* Aire sota l'última fila de targetes, dins del degradat. */ --spora-insl-pad-bottom: 200px; /* Ample: el que li doni el contenidor, que a la pàgina d'entrades és la finestra sencera. NO es fa servir el truc habitual del 100vw + marges negatius per treure la secció de la .ast-container d'Astra: el 100vw inclou l'ample de la barra de desplaçament, la caixa sobresortia i, per evitar la barra horitzontal, calia un `overflow` a l'arrel que ROMPIA el `position: sticky` del reveal del footer (el footer desapareixia). En comptes d'això, qui deixa anar el contenidor és el PHP: a la pàgina d'entrades es força el layout «page-builder» d'Astra (veure spora_insights_full_width_container() a functions.php), de manera que el #primary ja ocupa tota la finestra i aquí no cal cap truc. */ margin-top: 0; margin-bottom: 0; padding: var(--spora-insl-fade-top) 32px var(--spora-insl-pad-bottom); background: var(--spora-insl-bg); } /* --- Barra de filtres, cercador i estat buit ----------------------------- Viuen a `blocks/_shared/filter-bar.css` (2026-10-06): la mateixa barra la fan servir ara també els blocs «Listado de projectes» (graella i taula), i l'editor no carrega aquest style.css, així que la previsualització dels blocs sortiria sense estils. Aquí només queda el fons i l'aire de la secció. */ /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 600px) { .spora-insl { --spora-insl-pad-bottom: 120px; --spora-insl-fade-top: 100px; padding: var(--spora-insl-fade-top) 10px var(--spora-insl-pad-bottom); } } /* ========================================================================= FICHA D'INSIGHT — capçalera sobre reixa de 12 columnes · .spora-insight ------------------------------------------------------------------------- Estils de single.php i de template-parts/insight-header.php (la ficha de les entrades del blog). LIENZO. Igual que a les fitxes de projecte i de servei, la plantilla només prepara el llenç: el CONTINGUT va a sang i cada contenidor de Spectra hi posa el seu ample, el seu fons i els seus paddings. La capçalera, en canvi, sí que porta caixa pròpia: s'encaixa a 1440px i es centra. REIXA. La capçalera es maqueta sobre 12 columnes dins d'aquests 1440px menys 32px de padding a cada costat (1376 útils) i amb gutters de 24px —el mateix llenç que fa servir la resta del lloc: · data + temps de lectura -> apilats, a la COLUMNA 2. · títol -> de la COLUMNA 5 fins a la 12. Els dos blocs arrenquen a la mateixa alçada (align-items: start). Tipografia del disseny: · data / temps ... Geist 14 / 100% / 0, en tinta fluixa. · títol .......... STK Bureau Serif Light 48 / 100% / -1px, en majúscules. A la ficha NO es pinta la imatge destacada (només surt a les targetes del llistat) ni les molles de pa. ========================================================================= */ .spora-insight-hero { --spora-ih-cols: 12; --spora-ih-gap: 24px; --spora-ih-max-w: 1440px; --spora-ih-pad-x: 32px; --spora-ih-pad-top: clamp(96px, 12vw, 180px); --spora-ih-pad-bottom: clamp(56px, 6vw, 96px); /* Tinta principal (títol) i la seva versió «fluixa» (data i temps), les mateixes que al llistat d'insights. */ --spora-ih-ink: var(--wp--preset--color--spora-dark-green, #001A17); --spora-ih-ink-soft: #001A1730; --spora-ih-geist: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Alias amb NOMÉS la cara fina (Light 300); veure astra_child_font_faces_css. */ --spora-ih-stk: 'STK Bureau Serif Light', 'STK Bureau Serif', Georgia, serif; } .spora-insight-hero__head { box-sizing: border-box; display: grid; grid-template-columns: repeat(var(--spora-ih-cols), minmax(0, 1fr)); gap: var(--spora-ih-gap); /* Data i títol arrenquen a la mateixa línia de dalt. */ align-items: start; width: 100%; max-width: var(--spora-ih-max-w); margin-inline: auto; padding: var(--spora-ih-pad-top) var(--spora-ih-pad-x) var(--spora-ih-pad-bottom); } /* --- Data + temps de lectura: apilats, a la columna 2 -------------------- Ocupa DUES columnes: «19 / 12 / 2026» a Geist 14 mesura gairebé el mateix que una columna sencera i amb una sola es partiria de línia en algunes amplades. Com que el text va alineat a l'esquerra, visualment no canvia res. */ .spora-insight-hero__meta { grid-column: 2 / span 2; display: flex; flex-direction: column; gap: 4px; } .spora-insight-hero__data, .spora-insight-hero__temps { font-family: var(--spora-ih-geist); font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--spora-ih-ink-soft); } .spora-insight-hero__temps { text-transform: uppercase; } /* --- Títol: de la columna 5 a la 12 -------------------------------------- */ .spora-insight-hero__title { grid-column: 5 / -1; margin: 0; /* STK Bureau Serif Light. El !important és necessari, no decoratiu: hi ha una regla global `h1 { font-family: var(--spora-font-family-display) !important }` (més amunt en aquesta fulla) i un selector de classe la perdria. Mateix cas que el títol del hero de projecte. */ font-family: var(--spora-ih-stk) !important; font-size: 48px; font-weight: 300; line-height: 100%; letter-spacing: -1px; text-transform: uppercase; color: var(--spora-ih-ink); } /* --- Apartat lliure: contingut a sang ----------------------------------- Cada contenidor de Spectra es pinta a ample complet i hi posa el seu propi ample i els seus paddings (igual que a .spora-projecte--blocs). */ .spora-insight--blocs .spora-insight__content { max-width: none; margin: 0; padding: 0; } /* Els contenidors ja porten els seus marges verticals: l'

no afegeix separació per dalt (la capçalera arrenca enganxada a la barra del lloc). */ .spora-insight--blocs { margin-top: 0; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 921px) { /* La reixa es desmunta: data i títol passen a ample complet, apilats. */ .spora-insight-hero__meta, .spora-insight-hero__title { grid-column: 1 / -1; } .spora-insight-hero__title { margin-top: 32px; } } @media (max-width: 600px) { .spora-insight-hero { --spora-ih-pad-x: 10px; --spora-ih-pad-top: 80px; } .spora-insight-hero__title { font-size: 32px; } } /* ========================================================================= MODAL DE GUIES — formulari abans de descarregar · .spora-guia-modal ------------------------------------------------------------------------- El pinta inc/guies.php (al peu, només a les pàgines que enllacen alguna guia) i el governa Spora.guies (utils.js). El formulari és CF7 amb html_class="spora-guia-form": mateix llenguatge que el del newsletter (camps sense caixa, només separador inferior), però en blanc sobre fosc. z-index 99999: per sobre del header sticky i per sota del cursor propi (#spora-cursor, al màxim), que s'ha de continuar veient al modal. ========================================================================= */ html.spora-guia-modal-open, html.spora-guia-modal-open body { overflow: hidden; } .spora-guia-modal { --spora-gm-text: var(--spora-color-neutral-white); position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; padding: 120px 32px 80px; background: rgba(30, 30, 30, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--spora-gm-text); opacity: 0; transition: opacity 0.25s ease; } .spora-guia-modal[hidden] { display: none; } .spora-guia-modal.is-open { opacity: 1; } .spora-guia-modal__inner { width: 100%; max-width: 712px; margin: auto 0; } /* Tancar: creu groga a dalt a la dreta. Els hover/focus en pla perquè Astra pinta fons i ombra a tot

, ,

… idea que va a cambiar el mundo.