/**
 * Componentes de maquetación
 *
 * Elegidos el 9/11/2026 en el artifact «Prensa, capítulos y pie» (1C, 2A,
 * 3C). Como el resto del sistema, se ponen con clases en Elementor
 * (Avanzado → Clases CSS); el contenido sigue siendo editable allí.
 *
 *   bcomu-boto        Botón pastilla. Variantes: --vermell (por defecto),
 *                     --groc, --negre y --blanc. En un widget Botón.
 *   bcomu-capitol     Capítulo «Som la Barcelona…»: título y botón fijos a la
 *                     izquierda (bcomu-capitol__esq), fotos y texto a la
 *                     derecha (bcomu-capitol__dre). Dentro: __titol (título),
 *                     __fotos (fila con dos fotos) o __foto (una sola).
 *   bcomu-teletip     Lista de las últimas noticias (shortcode
 *                     [bcomu_teletip]); con el ratón, la foto sigue al cursor.
 *   bcomu-peu         Pie en dos bandas: __crida (verde, lema y botones) y
 *                     __banda (roja, logo, columnas y línea legal).
 *
 * @package BComu_Tema
 */

/* ---- Botón pastilla ------------------------------------------------- */

.elementor-widget-button.bcomu-boto .elementor-button {
  --bcomu-boto-fons: #CE0037;
  --bcomu-boto-text: #FFFFFF;
  --bcomu-velo: rgb(16 9 12 / 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background-color: var(--bcomu-boto-fons);
  color: var(--bcomu-boto-text);
  fill: var(--bcomu-boto-text);
  font-family: 'Raveo Display', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.2px;
  text-transform: none;
  text-align: left;
  box-shadow: inset 0 0 0 100vmax var(--bcomu-velo);
  transition: box-shadow .2s ease;
}
.elementor-widget-button.bcomu-boto--groc .elementor-button { --bcomu-boto-fons: #FFBF00; --bcomu-boto-text: #10090C; }
.elementor-widget-button.bcomu-boto--negre .elementor-button { --bcomu-boto-fons: #10090C; --bcomu-boto-text: #FFFFFF; }
.elementor-widget-button.bcomu-boto--blanc .elementor-button { --bcomu-boto-fons: #FFFFFF; --bcomu-boto-text: #10090C; }
@media (hover: hover) {
  .elementor-widget-button.bcomu-boto .elementor-button:hover { --bcomu-velo: rgb(16 9 12 / .14); }
  .elementor-widget-button.bcomu-boto--negre .elementor-button:hover { --bcomu-velo: rgb(255 255 255 / .16); }
}
.elementor-widget-button.bcomu-boto .elementor-button:focus-visible {
  outline: 2px solid #6248CB;
  outline-offset: 3px;
}

/* ---- Capítulos «Som la Barcelona…» ----------------------------------- */

.e-con.bcomu-capitol {
  --display: grid;
  /* Margen del texto a los lados. Las fotos llegan al borde del bloque, a
     10 px de la ventana como el resto de cajas (Remarc da9b6): en escritorio
     el capítulo no tiene margen a la derecha, y en el móvil las fotos salen
     del margen (abajo). */
  --bcomu-capitol-lat: clamp(16px, 2.4vw, 48px);
  --padding-top: clamp(48px, 5vw, 88px);
  --padding-bottom: clamp(88px, 9vw, 152px);
  --padding-left: var(--bcomu-capitol-lat);
  --padding-right: 0px;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  border-top: 1px solid rgb(16 9 12 / .14);
}
.e-con.bcomu-capitol > .e-con {
  --width: auto;
  width: auto;
  min-width: 0;
  padding: 0;
}
.e-con.bcomu-capitol > .bcomu-capitol__esq {
  --flex-direction: column;
  --align-items: flex-start;
  --gap: 28px;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  position: sticky;
  top: 112px;
}
.e-con.bcomu-capitol > .bcomu-capitol__dre {
  --flex-direction: column;
  --gap: clamp(32px, 3.4vw, 56px);
  flex-direction: column;
  gap: clamp(32px, 3.4vw, 56px);
}
.bcomu-capitol .bcomu-capitol__titol .elementor-heading-title {
  font-size: clamp(36px, 3.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.e-con.bcomu-capitol__fotos {
  --display: grid;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  gap: 12px;
  width: 100%;
  margin: 0;
  /* Sin el margen de 10 px de los contenedores: las dos fotos van donde iría
     una sola */
  padding: 0;
}
.e-con.bcomu-capitol__fotos > .e-con,
.e-con.bcomu-capitol__foto {
  --width: 100%;
  --min-height: clamp(300px, 34vw, 600px);
  width: 100%;
  min-height: clamp(300px, 34vw, 600px);
  margin: 0;
}
/* La lectura palabra a palabra, alineada a las fotos */
.bcomu-capitol .bcomu-lectura {
  width: 100%;
  margin: 0;
}
.bcomu-capitol .bcomu-lectura .elementor-heading-title {
  max-width: 30em;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1.24;
  text-align: left;
}
@media (max-width: 1024px) {
  .e-con.bcomu-capitol { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* En el móvil, una columna: título, fotos, texto y botón */
@media (max-width: 767px) {
  .e-con.bcomu-capitol {
    --display: flex;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    --padding-top: 48px;
    --padding-bottom: 72px;
    --padding-right: var(--bcomu-capitol-lat);
  }
  /* Las fotos, de borde a borde del bloque (10 px de la ventana) */
  .e-con.bcomu-capitol .e-con.bcomu-capitol__fotos,
  .e-con.bcomu-capitol .e-con.bcomu-capitol__foto {
    --width: auto;
    width: auto;
    margin-inline: calc(-1 * var(--bcomu-capitol-lat));
  }
  .e-con.bcomu-capitol > .bcomu-capitol__esq,
  .e-con.bcomu-capitol > .bcomu-capitol__dre { display: contents; }
  .bcomu-capitol .bcomu-capitol__titol { order: 1; }
  .bcomu-capitol .bcomu-capitol__fotos,
  .bcomu-capitol .bcomu-capitol__foto { order: 2; }
  .bcomu-capitol .bcomu-lectura { order: 3; }
  /* El botón, a todo el ancho y con el texto centrado (Remarc bd0f1,
     opción 2B de «Retoques en el móvil»); si no cabe en una línea («Obre
     camí amb nosaltres: fes una donació»), las dos quedan equilibradas */
  .bcomu-capitol .bcomu-boto { order: 4; align-self: stretch; }
  .bcomu-capitol .elementor-widget-button.bcomu-boto .elementor-button {
    display: flex;
    width: 100%;
    padding-block: 8px;
    text-align: center;
  }
  .bcomu-capitol .bcomu-boto .elementor-button-text { text-wrap: balance; }
  .e-con.bcomu-capitol__fotos > .e-con,
  .e-con.bcomu-capitol__foto { --min-height: 260px; min-height: 260px; }
  .e-con.bcomu-capitol__fotos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
  .bcomu-capitol .bcomu-capitol__titol .elementor-heading-title { font-size: 36px; }
  .bcomu-capitol .bcomu-lectura .elementor-heading-title { font-size: 22px; line-height: 1.26; }
}

/* ---- Teletipo de noticias ------------------------------------------- */

.bcomu-teletip {
  position: relative;
  display: grid;
  border-bottom: 1px solid rgb(16 9 12 / .16);
}
.bcomu-teletip__fila {
  position: relative;
  display: grid;
  grid-template-columns: 7.5em minmax(0, 14em) minmax(0, 1fr);
  gap: 12px 32px;
  align-items: baseline;
  padding-block: clamp(18px, 2vw, 28px);
}
.bcomu-teletip__fila::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgb(16 9 12 / .16);
  transform-origin: 0 50%;
  transition: transform .9s var(--bcomu-corba, ease);
}
.bcomu-teletip__data {
  font-family: 'Raveo Display', sans-serif;
  font-size: 15px;
  line-height: 1;
  color: rgb(16 9 12 / .62);
  font-variant-numeric: tabular-nums;
}
.bcomu-teletip__cat {
  justify-self: start;
  max-width: 100%;
  padding: 6px 12px 7px;
  border: 1px solid rgb(16 9 12 / .22);
  border-radius: 999px;
  font-family: 'Raveo Display', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: #10090C;
}
.bcomu-teletip__titol {
  margin: 0;
  font-family: 'Raveo Display', sans-serif;
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: #10090C;
  text-wrap: balance;
  transition: color .25s ease;
}
/* Más específico que «.page .entry-content a» de base.css, que subraya */
.bcomu-teletip .bcomu-teletip__fila .bcomu-teletip__titol a {
  color: inherit;
  text-decoration: none;
}
/* Toda la fila es el enlace */
.bcomu-teletip__titol a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bcomu-teletip__titol a:focus-visible { outline: none; }
.bcomu-teletip__titol a:focus-visible::after {
  outline: 2px solid #6248CB;
  outline-offset: -2px;
  border-radius: 8px;
}
.bcomu-teletip__fila:hover .bcomu-teletip__titol,
.bcomu-teletip__fila:focus-within .bcomu-teletip__titol { color: #CE0037; }

/* La foto que sigue al cursor (la crea js/teletip.js) */
.bcomu-teletip__foto {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(220px, 21vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: .92;
  box-shadow: 0 18px 40px -18px rgb(16 9 12 / .45);
  transition: opacity .25s ease, scale .3s var(--bcomu-surt, ease);
}
.bcomu-teletip__foto.is-activa { opacity: 1; scale: 1; }
.bcomu-teletip__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: none), (pointer: coarse) {
  .bcomu-teletip__foto { display: none; }
}

/* Entrada: las líneas se dibujan y cada fila sube (solo con movimiento) */
.bcomu-teletip__fila > * {
  transition: opacity .7s ease-out, transform .8s var(--bcomu-surt, ease);
}
.bcomu-teletip__fila:nth-child(2)::before, .bcomu-teletip__fila:nth-child(2) > * { transition-delay: .08s; }
.bcomu-teletip__fila:nth-child(3)::before, .bcomu-teletip__fila:nth-child(3) > * { transition-delay: .16s; }
.bcomu-teletip__fila:nth-child(4)::before, .bcomu-teletip__fila:nth-child(4) > * { transition-delay: .24s; }
.bcomu-teletip__fila:nth-child(5)::before, .bcomu-teletip__fila:nth-child(5) > * { transition-delay: .32s; }
.bcomu-teletip__fila:nth-child(n+6)::before, .bcomu-teletip__fila:nth-child(n+6) > * { transition-delay: .4s; }
.bcomu-teletip__titol { transition: color .25s ease, opacity .7s ease-out, transform .8s var(--bcomu-surt, ease); }
html.bcomu-moviment .bcomu-teletip:not(.is-visible) .bcomu-teletip__fila::before { transform: scaleX(0); }
html.bcomu-moviment .bcomu-teletip:not(.is-visible) .bcomu-teletip__fila > * {
  opacity: 0;
  transform: translateY(14px);
}

/* El botón de la sala de premsa, a la derecha bajo la lista */
.e-con.sala-de-premsa-home > .elementor-widget.bcomu-boto { align-self: flex-end; }
/* La sección va a 10 px del borde, como el pie (migración 28): la lista y el
   botón entran lo mismo que el texto de la banda verde y el del pie */
.e-con.sala-de-premsa-home > .elementor-widget-shortcode,
.e-con.sala-de-premsa-home > .elementor-widget-button { padding-inline: clamp(24px, 3.3vw, 56px); }

@media (max-width: 767px) {
  .bcomu-teletip__fila {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
  }
  .bcomu-teletip__titol { grid-column: 1 / -1; font-size: 21px; }
  .bcomu-teletip__cat { font-size: 13px; }
  .e-con.sala-de-premsa-home > .elementor-widget.bcomu-boto { align-self: flex-start; }
}

/* ---- Pie en dos bandas ---------------------------------------------- */

.e-con.bcomu-peu {
  --min-height: 0px;
  --padding-top: 10px;
  --padding-right: 10px;
  --padding-bottom: 10px;
  --padding-left: 10px;
  --gap: 10px;
  --row-gap: 10px;
  min-height: 0;
  padding: 10px;
  gap: 10px;
  background-color: #FFFFFF;
}
.e-con.bcomu-peu__crida,
.e-con.bcomu-peu__banda {
  --padding-top: clamp(28px, 3.3vw, 56px);
  --padding-right: clamp(24px, 3.3vw, 56px);
  --padding-left: clamp(24px, 3.3vw, 56px);
  border-radius: 12px;
}
.e-con.bcomu-peu__crida {
  --flex-direction: row;
  --flex-wrap: wrap;
  --justify-content: space-between;
  --align-items: flex-end;
  --gap: 24px 32px;
  --padding-bottom: clamp(28px, 3.3vw, 56px);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 32px;
  background-color: #94FF47;
  color: #10090C;
}
.e-con.bcomu-peu__crida > .bcomu-peu__lema { --container-widget-width: auto; width: auto; max-width: 100%; }
.bcomu-peu__lema .elementor-heading-title {
  margin: 0;
  color: #10090C;
  font-family: 'Raveo Display', sans-serif;
  font-size: clamp(52px, 7vw, 132px);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.05em;
}
.e-con.bcomu-peu__botons {
  --flex-direction: row;
  --flex-wrap: wrap;
  --gap: 12px;
  --width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  width: auto;
}
.e-con.bcomu-peu__banda {
  --flex-direction: column;
  --gap: clamp(32px, 3.4vw, 56px);
  --padding-bottom: 22px;
  flex-direction: column;
  gap: clamp(32px, 3.4vw, 56px);
  background-color: #CE0037;
  color: #FFFFFF;
}
.e-con.bcomu-peu__dalt {
  --display: grid;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 32px;
  align-items: start;
}
.e-con.bcomu-peu__dalt > .e-con { --width: auto; width: auto; min-width: 0; padding: 0; }
.e-con.bcomu-peu__marca {
  --flex-direction: column;
  --align-items: flex-start;
  --gap: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.bcomu-peu__logo img {
  width: 180px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.e-con.bcomu-peu__cols {
  --display: grid;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.e-con.bcomu-peu__cols > .e-con {
  --flex-direction: column;
  --gap: 16px;
  --width: auto;
  flex-direction: column;
  gap: 16px;
  width: auto;
  min-width: 0;
  padding: 0;
}
.bcomu-peu__cols .elementor-widget-heading:first-child .elementor-heading-title {
  margin: 0;
  color: #FFFFFF;
  font-family: 'Herokid', 'Arial Narrow', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}
.bcomu-peu__adreca .elementor-heading-title,
.bcomu-peu .elementor-nav-menu a.elementor-item,
.bcomu-peu__copy,
.bcomu-peu__copy p {
  margin: 0;
  color: #FFFFFF;
  font-family: 'Raveo Display', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}
.bcomu-peu__adreca b { font-weight: 600; }
.bcomu-peu .elementor-nav-menu a.elementor-item {
  padding: 2px 0;
  transition: opacity .2s ease;
}
.bcomu-peu .elementor-nav-menu a.elementor-item:hover,
.bcomu-peu .elementor-nav-menu a.elementor-item:focus-visible { color: #FFFFFF; opacity: .72; }
.e-con.bcomu-peu__legal {
  --flex-direction: row;
  --flex-wrap: wrap;
  --justify-content: space-between;
  --align-items: center;
  --gap: 12px 24px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / .3);
}
.e-con.bcomu-peu__legal > .elementor-widget { --container-widget-width: auto; width: auto; }
.bcomu-peu__legal .elementor-nav-menu a.elementor-item,
.bcomu-peu__copy,
.bcomu-peu__copy p { font-size: 15px; }
.bcomu-peu__legal .elementor-nav-menu--layout-horizontal .elementor-nav-menu { gap: 4px 20px; }
.bcomu-peu__legal .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a { padding: 0; }
.bcomu-peu__legal .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after { display: none; }

@media (max-width: 1024px) {
  .e-con.bcomu-peu__dalt { grid-template-columns: minmax(0, 1fr); }
}
/* Móvil (opción 2A, 9/11/2026): una columna. Antes las cuatro columnas iban
   en dos de 134 px, los enlaces largos se partían y las filas no casaban.
   Ahora cada bloque va a todo el ancho con los enlaces en filas de 44 px
   separadas por una línea fina, las redes repartidas a lo ancho y los
   legales en una rejilla de 2 × 2. El logo, a 200 px (mínimo de marca). */
@media (max-width: 767px) {
  .e-con.bcomu-peu__crida { --align-items: flex-start; flex-direction: column; align-items: flex-start; }
  .e-con.bcomu-peu__marca { --align-items: stretch; align-items: stretch; gap: 20px; }
  .bcomu-peu__logo img { width: 200px; }
  .bcomu-peu .elementor-widget-social-icons { width: 100%; --container-widget-width: 100%; }
  /* Especificidad (0,6,0) a propósito (10/11/2026): en Safari y en el
     iPhone Elementor pone e--ua-appleWebkit en el body y su
     custom-apple-webkit.min.css devuelve la fila a inline-block con
     (0,5,0); con los iconos en display: flex, salían en columna. */
  .e-con.bcomu-peu .elementor-widget-social-icons.elementor-widget .elementor-social-icons-wrapper.elementor-grid {
    display: flex;
    justify-content: space-between;
    word-spacing: normal;
    margin: 0;
  }
  .bcomu-peu .elementor-widget-social-icons .elementor-grid-item { display: flex; margin: 0; }
  .e-con.bcomu-peu__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .e-con.bcomu-peu__cols > .e-con { --gap: 6px; gap: 6px; }
  .bcomu-peu__cols .elementor-widget-heading:first-child .elementor-heading-title { font-size: 20px; }
  .bcomu-peu__adreca .elementor-heading-title,
  .bcomu-peu .elementor-nav-menu a.elementor-item { font-size: 16px; }
  .bcomu-peu__cols .elementor-nav-menu a.elementor-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0;
    border-top: 1px solid rgb(255 255 255 / .28);
  }
  .bcomu-peu__cols .elementor-nav-menu > li:last-child > a.elementor-item { border-bottom: 1px solid rgb(255 255 255 / .28); }
  /* Línea legal (retoque 9/11/2026): sin el relleno lateral de 10 px del
     contenedor, la raya casa con las de las columnas y el texto con su
     borde; filas de 32 px en vez de 44 (sigue por encima de los 24 px de
     WCAG 2.5.8) para que los cuatro enlaces se lean como un grupo, en una
     lista vertical (elegida por el usuario en vez de la rejilla 2 × 2). */
  .e-con.bcomu-peu__legal {
    --align-items: stretch;
    --width: auto;
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin-inline: 10px;
    padding: 20px 0 0;
    gap: 10px;
  }
  .bcomu-peu__copy,
  .bcomu-peu__copy p { font-size: 14px; opacity: .85; }
  /* El © cierra el pie, debajo de la lista (en el documento va antes). */
  .e-con.bcomu-peu__legal > .bcomu-peu__copy { order: 1; margin-top: 8px; }
  .bcomu-peu__legal .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 0;
  }
  .e-con.bcomu-peu__legal .elementor-nav-menu a.elementor-item {
    min-height: 32px;
    font-size: 14px;
    white-space: normal;
  }
}

/* ---- Móvil y accesibilidad (bloque 4, 9/11/2026) ------------------- */

/* Zonas táctiles de 44 px como mínimo en pantallas táctiles. Donde no hay
   sitio para crecer (iconos de redes, «Més info» del carrusel, temas de
   las fichas), una capa invisible amplía la zona sin mover nada. */
@media (pointer: coarse), (max-width: 767px) {
  .elementor-widget-button .elementor-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .elementor-social-icon,
  .regidor-popup-trigger,
  .regidor-social a,
  a.elementor-icon,
  a.elementor-post-info__terms-list-item {
    position: relative;
  }
  .elementor-social-icon::after,
  .regidor-popup-trigger::after,
  .regidor-social a::after,
  a.elementor-icon::after,
  a.elementor-post-info__terms-list-item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    translate: -50% -50%;
  }
  .bec-submenu-item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .elementor-nav-menu--layout-vertical .elementor-nav-menu a.elementor-item,
  .bcomu-peu__legal .elementor-nav-menu a.elementor-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .bec-filtres a.bec-filtres__xip,
  .bec-filtres__cerca input,
  .bec-filtres__cerca button,
  .bec-search-filter,
  .bec-date-filter,
  .bec-status-filter,
  .bec-category-filter,
  .bec-btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bcomu-teletip__fila::before,
  .bcomu-teletip__fila > *,
  .bcomu-teletip__foto { transition: none !important; }
}

/* =====================================================================
   Fondo de marca (9/11/2026, «Fondos, cursivas y detalles»: 6C)
   ===================================================================== */

/* bcomu-degradat: cabeceras sin foto (Premsa, «Notes i comunicacions»).
   Dos manchas, índigo y rojo de la marca, sobre el fondo de la página.
   Con --mou se desplazan despacio; con «reducir movimiento», quietas.
   Usa ::before y ::after del contenedor, así que no admite el «fondo
   superpuesto» de Elementor en el mismo contenedor */
.e-con.bcomu-degradat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.e-con.bcomu-degradat::before,
.e-con.bcomu-degradat::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  mix-blend-mode: normal;
  filter: blur(clamp(40px, 6vw, 90px));
  pointer-events: none;
  will-change: transform;
}
.e-con.bcomu-degradat::before {
  inset: 15% auto auto -8%;
  width: 48%;
  height: 80%;
  background: var(--bcomu-taca-1, rgb(98 72 203 / .34));
}
.e-con.bcomu-degradat::after {
  inset: -50% -6% auto auto;
  width: 44%;
  height: 100%;
  background: var(--bcomu-taca-2, rgb(206 0 55 / .2));
}
.e-con.bcomu-degradat--mou::before { animation: bcomu-deriva-1 22s ease-in-out infinite alternate; }
.e-con.bcomu-degradat--mou::after { animation: bcomu-deriva-2 18s ease-in-out infinite alternate; }
/* Variante amarilla (Contacte): amarillo e índigo, complementarios en el manual */
.e-con.bcomu-degradat--groc { --bcomu-taca-1: rgb(255 191 0 / .46); --bcomu-taca-2: rgb(98 72 203 / .22); }
@keyframes bcomu-deriva-1 { to { transform: translate(42%, -30%) scale(1.15); } }
@keyframes bcomu-deriva-2 { to { transform: translate(-55%, 30%) scale(.85); } }
@media (prefers-reduced-motion: reduce) {
  .e-con.bcomu-degradat--mou::before,
  .e-con.bcomu-degradat--mou::after { animation: none; }
}


/* =====================================================================
   Cabeceras de página (9/11/2026, «Cabeceras interiores»: 1C, 2B, 3A,
   4A, 5A). Agenda, Premsa, Contacte (CA y ES) y la plantilla de noticias
   «00. Notícies individuals». Las monta la migración 23.

   Un mismo bloque de texto para todas: la pastilla con el nombre de la
   sección (bcomu-pagina__nom), la frase en Raveo con alguna palabra en
   Garamond cursiva (<em>, bcomu-pagina__frase, el h1) y la entradilla
   (bcomu-pagina__entra). Al lado, si hace falta, una columna
   (bcomu-pagina__lateral) y, debajo, una fila (bcomu-pagina__baix).
   El fondo sigue la regla del manual:
     bcomu-pagina--foto      la foto (widget de imagen bcomu-pagina__foto)
                             se funde en blanco por abajo, como en la
                             portada; el texto empieza donde la foto ya
                             casi no se ve. Si la página no tiene foto,
                             sale el degradado (lleva también bcomu-degradat).
     bcomu-pagina--degradat  las manchas en movimiento de bcomu-degradat.
   Sección (color de la pastilla): --agenda, --premsa, --contacte, --noticia.
   bcomu-pagina--una: una sola columna centrada (noticias).
   La barra de la web es fija y transparente (css/header.css): la cabecera
   deja arriba su altura (--bcomu-barra) y la foto empieza debajo.
   ===================================================================== */

.e-con.bcomu-pagina {
  --bcomu-barra: 88px;
  --bcomu-pag-gutter: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2));
  --bcomu-pag-sec: #CE0037;
  --bcomu-pag-sec-t: #FFFFFF;
  --bcomu-foto-h: clamp(300px, 36vw, 560px);
  --bcomu-foto-mask: linear-gradient(#000 20%, transparent 90%);
  --bcomu-cos-dalt: calc(var(--bcomu-barra) + var(--bcomu-foto-h) * .7);
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background-color: #FFFFFF;
  color: #10090C;
}
.e-con.bcomu-pagina--degradat,
.e-con.bcomu-pagina--foto:not(:has(.bcomu-pagina__foto img)) {
  --bcomu-cos-dalt: calc(var(--bcomu-barra) + clamp(40px, 5vw, 88px));
}
/* Con foto, sin manchas; sin foto, sin el hueco de la foto */
.e-con.bcomu-pagina--foto:has(.bcomu-pagina__foto img)::before,
.e-con.bcomu-pagina--foto:has(.bcomu-pagina__foto img)::after { display: none; }
.e-con.bcomu-pagina--foto:not(:has(.bcomu-pagina__foto img)) > .bcomu-pagina__foto { display: none; }

.e-con.bcomu-pagina--agenda { --bcomu-pag-sec: #CE0037; --bcomu-pag-sec-t: #FFFFFF; }
.e-con.bcomu-pagina--premsa,
.e-con.bcomu-pagina--noticia { --bcomu-pag-sec: #6248CB; --bcomu-pag-sec-t: #FFFFFF; }
.e-con.bcomu-pagina--contacte { --bcomu-pag-sec: #FFBF00; --bcomu-pag-sec-t: #10090C; }
.e-con.bcomu-pagina--noticia {
  --bcomu-foto-h: clamp(320px, 44vw, 660px);
  --bcomu-foto-mask: linear-gradient(#000 55%, transparent 95%);
  --bcomu-cos-dalt: calc(var(--bcomu-barra) + var(--bcomu-foto-h) * .9);
}

/* La foto: widget de imagen, a lo ancho y fundida en blanco */
.e-con.bcomu-pagina > .elementor-widget.bcomu-pagina__foto {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--bcomu-barra) + var(--bcomu-foto-h));
  width: 100%;
  max-width: none;
  margin: 0;
  -webkit-mask-image: var(--bcomu-foto-mask);
  mask-image: var(--bcomu-foto-mask);
  pointer-events: none;
}
/* Velo oscuro arriba: la barra de la web va encima de la foto (9/11, Remarc
   7758f) y el logo y los enlaces pasan a blanco mientras la barra es
   transparente (ver «Barra de la web sobre la foto», más abajo) */
.e-con.bcomu-pagina > .elementor-widget.bcomu-pagina__foto::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--bcomu-barra) + 90px);
  background: linear-gradient(rgb(16 9 12 / .5), rgb(16 9 12 / 0));
  pointer-events: none;
}
.bcomu-pagina__foto .elementor-widget-container,
.bcomu-pagina__foto img {
  width: 100%;
  height: 100%;
}
.bcomu-pagina .bcomu-pagina__foto img {
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0;
}
.e-con.bcomu-pagina--noticia .bcomu-pagina__foto img { object-position: center 6%; }
/* Grano en la foto de las noticias (10/11/2026, Remarc 79b2d): muchas fotos
   de prensa tienen poca resolución y a este tamaño se ven pixeladas. El
   mismo grano que la portada, debajo del velo de arriba; la máscara de la
   foto lo funde en blanco con ella. */
.e-con.bcomu-pagina--noticia > .elementor-widget.bcomu-pagina__foto { overflow: hidden; }
.e-con.bcomu-pagina--noticia > .elementor-widget.bcomu-pagina__foto::before {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .6;
  mix-blend-mode: overlay;
  background: var(--bcomu-gra) repeat;
  background-size: 240px 240px;
  will-change: transform;
  animation: bcomu-heroi-gra .9s steps(1) infinite;
}

/* Barra de la web sobre la foto: mientras es transparente (arriba del todo),
   logo, enlaces de campaña y Menú en blanco. Participa y Donacions no
   cambian. Al bajar (barra blanca o solo botones) vuelve a como es siempre. */
html:has(.bcomu-pagina--foto .bcomu-pagina__foto img) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__logo img {
  filter: brightness(0) invert(1);
}
html:has(.bcomu-pagina--foto .bcomu-pagina__foto img) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__camp {
  --e-nav-menu-divider-color: rgb(255 255 255 / .55);
}
html:has(.bcomu-pagina--foto .bcomu-pagina__foto img) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__camp .elementor-item,
html:has(.bcomu-pagina--foto .bcomu-pagina__foto img) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__btn--menu .elementor-button {
  color: #FFFFFF;
}

/* Texto y columna lateral */
.e-con.bcomu-pagina > .e-con.bcomu-pagina__cos {
  --display: grid;
  --padding-top: var(--bcomu-cos-dalt);
  --padding-right: var(--bcomu-pag-gutter);
  --padding-bottom: clamp(40px, 5vw, 72px);
  --padding-left: var(--bcomu-pag-gutter);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
  width: 100%;
  padding: var(--bcomu-cos-dalt) var(--bcomu-pag-gutter) clamp(40px, 5vw, 72px);
}
.e-con.bcomu-pagina > .e-con.bcomu-pagina__cos:has(> .bcomu-pagina__lateral) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.e-con.bcomu-pagina--una > .e-con.bcomu-pagina__cos {
  --bcomu-pag-gutter: max(20px, calc((100% - 880px) / 2));
}
.e-con.bcomu-pagina__text {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --flex-direction: column;
  --align-items: flex-start;
  --gap: clamp(16px, 1.6vw, 24px);
  --row-gap: clamp(16px, 1.6vw, 24px);
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 24px);
  padding: 0;
  min-width: 0;
}
.e-con.bcomu-pagina__lateral {
  --padding-top: 0;
  --padding-right: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  padding: 0;
  min-width: 0;
}
.e-con.bcomu-pagina > .e-con.bcomu-pagina__baix {
  --padding-top: 0;
  --padding-right: var(--bcomu-pag-gutter);
  --padding-bottom: clamp(32px, 4vw, 56px);
  --padding-left: var(--bcomu-pag-gutter);
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: calc(clamp(40px, 5vw, 72px) * -0.4);
  padding: 0 var(--bcomu-pag-gutter) clamp(32px, 4vw, 56px);
}
.bcomu-pagina .elementor-widget { margin: 0; }

/* La pastilla con el nombre de la sección */
.e-con.bcomu-pagina__text > .elementor-widget.bcomu-pagina__nom {
  --container-widget-width: fit-content;
  width: fit-content;
  max-width: 100%;
}
.bcomu-pagina .bcomu-pagina__nom .elementor-heading-title,
.bcomu-pastilla {
  display: inline-block;
  margin: 0;
  padding: .3em .72em .42em;
  border-radius: 10px;
  background: var(--bcomu-pag-sec);
  color: var(--bcomu-pag-sec-t);
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
}
/* La frase (h1). El widget de título de Elementor recorta lo que sale de
   su caja: sin esto, la g y la p de la Garamond cursiva se cortan. */
.e-con.bcomu-pagina .elementor-widget.bcomu-pagina__frase { overflow: visible; }
.bcomu-pagina .bcomu-pagina__frase .elementor-heading-title {
  margin: 0;
  max-width: 16ch;
  color: #10090C;
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
  padding-bottom: .08em;
}
.bcomu-pagina .bcomu-pagina__frase .elementor-heading-title em {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.025em;
}
.e-con.bcomu-pagina--noticia .bcomu-pagina__frase .elementor-heading-title {
  max-width: 23ch;
  font-size: clamp(32px, 3.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
/* La entradilla */
.bcomu-pagina .bcomu-pagina__entra,
.bcomu-pagina .bcomu-pagina__entra p {
  margin: 0;
  max-width: 46ch;
  color: #10090C;
  font-family: 'Raveo', sans-serif;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 400;
  line-height: 1.45;
}
.e-con.bcomu-pagina--noticia .bcomu-pagina__entra,
.e-con.bcomu-pagina--noticia .bcomu-pagina__entra p {
  max-width: 42ch;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
}

/* Pastillas de la noticia ([bcomu_noticia_pastilles]) */
.bcomu-pastilles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.bcomu-pastilla:hover { filter: brightness(1.08); }
/* .bcomu-pastilles delante: Elementor quita la sombra a los enlaces (.elementor a) */
.bcomu-pastilles .bcomu-pastilla--vora {
  background: transparent;
  color: #10090C;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.bcomu-pastilles .bcomu-pastilla--vora:hover { filter: none; background: rgb(16 9 12 / .06); }
.bcomu-pastilles__data {
  color: rgb(16 9 12 / .72);
  font-family: 'Raveo', sans-serif;
  font-size: 16px;
  line-height: 1;
}

/* Columna lateral: próximo acto ([bcomu_proper_acte]) */
.bcomu-acte {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 18px rgb(16 9 12 / .12);
  color: #10090C;
  font-family: 'Raveo', sans-serif;
}
.bcomu-acte__et {
  margin: 0;
  color: #CE0037;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.bcomu-acte__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.bcomu-acte__data {
  display: grid;
  justify-items: center;
  min-width: 3.6em;
  padding: .5em .4em .55em;
  border-radius: 10px;
  background: #CE0037;
  color: #FFFFFF;
}
.bcomu-acte__dia {
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.bcomu-acte__mes { font-size: 13px; font-weight: 500; line-height: 1.2; }
.bcomu-acte__titol {
  margin: 0;
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.bcomu-pagina .bcomu-acte__titol a { color: inherit; text-decoration: none; }
.bcomu-pagina .bcomu-acte__titol a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bcomu-acte__info {
  margin: .4em 0 0;
  color: rgb(16 9 12 / .7);
  font-size: 14px;
  line-height: 1.35;
}
.bcomu-pagina a.bcomu-acte__boto {
  justify-self: start;
  padding: .75em 1.15em;
  border-radius: 999px;
  background: #10090C;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease;
}
.bcomu-pagina a.bcomu-acte__boto:hover,
.bcomu-pagina a.bcomu-acte__boto:focus-visible { background: #CE0037; color: #FFFFFF; }

/* Columna lateral: periodistas (Premsa) y sedes (Contacte), texto de Elementor */
.bcomu-pagina__lateral .bcomu-periodistes p,
.bcomu-pagina__lateral .bcomu-seus p { margin: 0; }
.bcomu-periodistes {
  display: grid;
  gap: .3em;
  justify-items: start;
  color: #10090C;
  font-family: 'Raveo', sans-serif;
  font-size: 16px;
  line-height: 1.35;
}
.bcomu-periodistes__t { color: rgb(16 9 12 / .7); font-weight: 500; }
.bcomu-pagina .bcomu-periodistes a { color: inherit; text-decoration: none; }
.bcomu-pagina .bcomu-periodistes a:hover { color: #CE0037; }
.bcomu-periodistes__correu { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.bcomu-seus {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #10090C;
  font-family: 'Raveo', sans-serif;
}
.bcomu-seus li {
  display: grid;
  gap: .2em;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgb(16 9 12 / .16);
}
.bcomu-seus li:first-child { padding-top: 0; border-top: 0; }
.bcomu-seus strong { font-size: 19px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.bcomu-seus strong span { font-weight: 400; opacity: .7; }
.bcomu-seus p { font-size: 15px; line-height: 1.35; }

/* Fila de debajo: los temas y el buscador de la Sala de premsa */
.bcomu-pagina__baix .bec-filtres--premsa { padding: 0; background: transparent; }
/* Las listas del tema llevan sangría en móvil; aquí no */
.bcomu-pagina ul.bcomu-seus,
.bcomu-pagina__baix ul.bec-filtres__temes { padding-left: 0; }
.bcomu-pagina__baix .bec-filtres__cerca input { background-color: rgb(255 255 255 / .72); }
/* Los temas, más discretos que los botones de la cabecera (Remarc 04873):
   píldoras finas y transparentes, sin el rótulo «TEMES» */
.bcomu-pagina__baix ul.bec-filtres__temes { gap: 6px; }
.bcomu-pagina__baix .bec-filtres a.bec-filtres__xip,
.bcomu-pagina__baix .bec-filtres a.bec-filtres__xip:visited {
  height: 32px;
  min-height: 0;
  padding: 0 13px;
  border-color: rgb(16 9 12 / .12);
  background: transparent;
  color: rgb(16 9 12 / .78);
  font-size: 14px;
}
.bcomu-pagina__baix .bec-filtres a.bec-filtres__xip:hover,
.bcomu-pagina__baix .bec-filtres a.bec-filtres__xip[aria-current="page"] {
  border-color: #10090C;
  background: #10090C;
  color: #FFFFFF;
}
/* En pantallas táctiles, 36 px a la vista y 44 al dedo. La fila se desliza
   (overflow), así que deja 4 px arriba y abajo para que no recorte la zona */
@media (pointer: coarse), (max-width: 767px) {
  .bcomu-pagina__baix ul.bec-filtres__temes { padding-block: 4px; margin-block: -4px; }
  /* En la página de un tema, ese tema primero: si no, quedaría fuera de la pantalla */
  .bcomu-pagina__baix ul.bec-filtres__temes li:has(> [aria-current="page"]) { order: -1; }
  .bcomu-pagina__baix .bec-filtres a.bec-filtres__xip { position: relative; height: 36px; }
  .bcomu-pagina__baix .bec-filtres a.bec-filtres__xip::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 44px;
    translate: 0 -50%;
  }
}

/* ---- Contacte: formulario y mapa (9/11, Remarc d67cd y df7d6) ------
   Sin el fondo gris de la sección: el formulario va en una tarjeta gris
   clara redondeada y el mapa ocupa la misma altura. Las clases las pone la
   migración 23 (bcomu-contacte__fila, __form, __mapa). */
.e-con.bcomu-contacte__fila {
  --align-items: stretch;
  align-items: stretch;
}
.e-con.bcomu-contacte__mapa {
  --flex-direction: column;
  flex-direction: column;
}
.e-con.bcomu-contacte__mapa > .elementor-widget-google_maps {
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
  border-radius: 16px;
}
.bcomu-contacte__mapa .elementor-widget-google_maps .elementor-widget-container,
.bcomu-contacte__mapa .elementor-widget-google_maps .elementor-custom-embed,
.bcomu-contacte__mapa .elementor-widget-google_maps iframe {
  height: 100% !important;
  min-height: 320px;
}

/* ---- Cuerpo de la noticia en una columna (5A) ---------------------- */
.e-con.bcomu-noticia {
  --flex-direction: column;
  flex-direction: column;
}
.e-con.bcomu-noticia__cos {
  --width: 100%;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}
.bcomu-noticia__cos .elementor-widget-theme-post-content { max-width: 62ch; }
/* Citas marcadas como cita: grandes, en Garamond, con comillas de la marca */
.elementor-widget-theme-post-content blockquote {
  margin: 1.4em 0;
  padding: 0;
  border: 0;
  color: #10090C;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.elementor-widget-theme-post-content blockquote p { margin: 0; }
.elementor-widget-theme-post-content blockquote > p:first-of-type::before { content: "«"; color: #CE0037; }
.elementor-widget-theme-post-content blockquote > p:last-of-type::after { content: "»"; color: #CE0037; }
.elementor-widget-theme-post-content blockquote cite {
  display: block;
  margin-top: .7em;
  color: rgb(16 9 12 / .65);
  font-family: 'Raveo', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
}

/* El PDF y el contacto de prensa ([bcn_press_sidebar] del plugin), al final
   y en una caja gris. Solo se pisan sus estilos desde aquí. */
.bcomu-noticia__premsa .bcn-press-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin: 0;
  padding: 24px 28px;
  border: 0;
  border-radius: 14px;
  background: #F5F5F5;
  box-shadow: none;
}
.bcomu-noticia__premsa .bcn-sidebar-section,
.bcomu-noticia__premsa .bcn-sidebar-footer {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.bcomu-noticia__premsa .bcn-related-section { display: none; }
.bcomu-noticia__premsa .bcn-section-title,
.bcomu-noticia__premsa .bcn-pdf-preview { display: none; }
.bcomu-noticia__premsa .bcn-contact-info h4 {
  margin: 0 0 .3em;
  color: rgb(16 9 12 / .7);
  font-family: 'Raveo', sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.bcomu-noticia__premsa .bcn-contact-item { margin: 0; font-size: 18px; }
.bcomu-noticia__premsa .bcn-contact-item a { color: #10090C; text-decoration: none; }
.bcomu-noticia__premsa .bcn-contact-item a:hover { color: #CE0037; }
.bcomu-noticia__premsa .bcn-icon-email { display: none; }
.bcomu-noticia__premsa .bcn-generate-pdf {
  width: auto;
  padding: .9em 1.4em;
  border: 0;
  border-radius: 999px;
  background: #CE0037;
  color: #FFFFFF;
  font-family: 'Raveo', sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.bcomu-noticia__premsa .bcn-sidebar-footer { order: -1; }
/* 32 px entre las etiquetas y la caja, como del texto a las etiquetas
   (Remarc e0f0c, 1A). La línea de las etiquetas ya deja 1 px; y el plugin
   pone «.elementor-widget-container .bcn-press-sidebar { margin: 0 }» después
   que este archivo, de ahí el .elementor-widget delante. */
.elementor-widget.bcomu-noticia__premsa .bcn-press-sidebar { margin-top: 31px; }
/* En el móvil las etiquetas van en líneas de 2rem (style.css) y dejan 4 px */
@media (max-width: 768px) {
  .elementor-widget.bcomu-noticia__premsa .bcn-press-sidebar { margin-top: 28px; }
}

/* Más noticias del mismo tema ([bcomu_noticies_relacionades]) */
.bcomu-relacionades {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid rgb(16 9 12 / .12);
}
.bcomu-relacionades__titol {
  margin: 0;
  color: #10090C;
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.bcomu-relacionades__titol em {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  font-weight: 400;
}
.bcomu-relacionades__fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.bcomu-relacionada {
  display: grid;
  gap: 12px;
  align-content: start;
  color: #10090C;
  text-decoration: none;
}
.bcomu-relacionada img,
.bcomu-relacionada__buit {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: #F5F5F5;
}
.bcomu-relacionada time {
  color: #CE0037;
  font-family: 'Raveo', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.bcomu-relacionada h3 {
  margin: 0;
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.bcomu-relacionada:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .e-con.bcomu-pagina > .e-con.bcomu-pagina__cos:has(> .bcomu-pagina__lateral) {
    grid-template-columns: minmax(0, 1fr);
  }
  .e-con.bcomu-pagina__lateral { justify-self: start; }
}
@media (max-width: 767px) {
  .e-con.bcomu-pagina {
    --bcomu-barra: 72px;
    --bcomu-foto-h: 280px;
    --bcomu-cos-dalt: calc(var(--bcomu-barra) + 200px);
  }
  .e-con.bcomu-pagina--noticia {
    --bcomu-foto-h: 300px;
    --bcomu-cos-dalt: calc(var(--bcomu-barra) + 250px);
  }
  .e-con.bcomu-pagina--degradat,
  .e-con.bcomu-pagina--foto:not(:has(.bcomu-pagina__foto img)) {
    --bcomu-cos-dalt: calc(var(--bcomu-barra) + 40px);
  }
  .bcomu-pagina .bcomu-pagina__nom .elementor-heading-title,
  .bcomu-pastilla { font-size: 17px; }
  .bcomu-relacionades__fila { grid-template-columns: minmax(0, 1fr); }
  .bcomu-relacionada { grid-template-columns: 38% minmax(0, 1fr); gap: 14px; }
  .bcomu-noticia__premsa .bcn-press-sidebar { padding: 20px; }
  /* Los temas se deslizan hasta el borde de la pantalla */
  .bcomu-pagina__baix ul.bec-filtres__temes {
    margin-inline: calc(var(--bcomu-pag-gutter) * -1);
    padding-inline: var(--bcomu-pag-gutter);
  }
}

/* =====================================================================
   Hero de la portada (9/11/2026, artifact «Hero de la portada»: A,
   «Foto viva»). Portada en catalán y en castellano y página de Gerardo
   Pisarello; lo monta la migración 24.

   El contenedor (bcomu-heroi-foto) lleva de fondo el «Pase de
   diapositivas» de Elementor: las fotos a todo color, sin velo blanco ni
   grano. Encima, un velo negro desde abajo (y otro arriba para la barra de
   la web) que deja leer el texto en blanco. Las anclas (bec-submenu) son
   xips y el titular (bcomu-heroi-foto__titol, con bcomu-subratllat
   --vermell en el <mark>) va abajo a la izquierda, en Raveo con las
   palabras clave en negrita, como los capítulos de debajo.
   js/heroi-foto.js añade abajo a la derecha el pie de la foto (su
   «Leyenda» en Medios), una raya por foto y el botón de pausa.
   ===================================================================== */

.e-con.bcomu-heroi-foto {
  --bcomu-heroi-gutter: clamp(20px, 4vw, 56px);
  --bcomu-heroi-baix: clamp(40px, 7vh, 88px);
  --justify-content: flex-end;
  --align-items: flex-start;
  --gap: clamp(16px, 2vw, 28px);
  --row-gap: clamp(16px, 2vw, 28px);
  --padding-top: 120px;
  --padding-right: var(--bcomu-heroi-gutter);
  --padding-bottom: var(--bcomu-heroi-baix);
  --padding-left: var(--bcomu-heroi-gutter);
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  padding: 120px var(--bcomu-heroi-gutter) var(--bcomu-heroi-baix);
  overflow: hidden;
  background-color: #10090C;
  color: #FFFFFF;
}
/* Los velos van sobre las fotos (la capa del pase) y debajo del texto */
.e-con.bcomu-heroi-foto > .elementor-background-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(16 9 12 / .84), rgb(16 9 12 / .42) 42%, rgb(16 9 12 / 0) 68%),
    linear-gradient(rgb(16 9 12 / .45), rgb(16 9 12 / 0) 220px);
}
/* Grano de película sobre las fotos y los velos, debajo del texto. Disimula
   la compresión y el reescalado de fotos que no tienen más resolución (el
   manual también pone grano en sus fotos). Una capa de ruido en «overlay»
   que salta de sitio unas once veces por segundo; con «reducir
   movimiento», quieta. La intensidad es --bcomu-heroi-gra. La textura
   (--bcomu-gra) también la usan las fotos de las noticias. */
:root { --bcomu-gra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.e-con.bcomu-heroi-foto { --bcomu-heroi-gra: .6; }
.e-con.bcomu-heroi-foto > .elementor-background-slideshow { isolation: isolate; }
.e-con.bcomu-heroi-foto > .elementor-background-slideshow::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 3;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  opacity: var(--bcomu-heroi-gra);
  mix-blend-mode: overlay;
  background: var(--bcomu-gra) repeat;
  background-size: 240px 240px;
  transition: none;
  will-change: transform;
  animation: bcomu-heroi-gra .9s steps(1) infinite;
}
@keyframes bcomu-heroi-gra {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4%, -7%); }
  20%  { transform: translate(-9%, 3%); }
  30%  { transform: translate(6%, -9%); }
  40%  { transform: translate(-3%, 8%); }
  50%  { transform: translate(-8%, -2%); }
  60%  { transform: translate(7%, 5%); }
  70%  { transform: translate(2%, -6%); }
  80%  { transform: translate(-6%, 6%); }
  90%  { transform: translate(8%, -3%); }
}
.e-con.bcomu-heroi-foto > .elementor-element {
  position: relative;
  z-index: 3;
}

/* Anclas: xips blancos de contorno, sin los puntos medios */
.e-con.bcomu-heroi-foto .bec-submenu-container {
  max-width: none;
  margin: 0;
  padding: 0;
}
.e-con.bcomu-heroi-foto .bec-submenu {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.e-con.bcomu-heroi-foto .bec-submenu-separator { display: none; }
.e-con.bcomu-heroi-foto .bec-submenu-item {
  padding: .4em .95em .5em;
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: 999px;
  color: #FFFFFF;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.e-con.bcomu-heroi-foto .bec-submenu-item:is(:hover, :focus-visible, .active) {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #10090C;
}

/* Titular: Raveo, blanco, a la izquierda; las palabras clave en negrita */
.e-con.bcomu-heroi-foto > .elementor-widget.bcomu-heroi-foto__titol {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: visible;
}
.e-con.bcomu-heroi-foto .bcomu-heroi-foto__titol .elementor-heading-title {
  max-width: 12.5em;
  margin: 0;
  overflow: visible;
  color: #FFFFFF;
  font-family: 'Raveo Display', 'Raveo', sans-serif;
  font-size: clamp(40px, 5.2vw, 88px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-align: left;
  text-wrap: balance;
}
.e-con.bcomu-heroi-foto .bcomu-heroi-foto__titol b { font-weight: 700; }
/* Saltos de línea que solo existen en el móvil (ver más abajo) */
.bcomu-heroi-foto__titol .bcomu-salt-mobil { display: none; }

/* Pie de foto, rayas y pausa (js/heroi-foto.js) */
.bcomu-heroi-foto__peu {
  position: absolute;
  z-index: 3;
  right: var(--bcomu-heroi-gutter);
  bottom: var(--bcomu-heroi-baix);
  display: grid;
  justify-items: end;
  gap: 10px;
  max-width: min(420px, 36%);
  text-align: right;
  color: #FFFFFF;
}
/* El pie va en dos líneas: qué es · dónde o cuándo (como en el manual) */
.bcomu-heroi-foto__text span { display: block; }
.bcomu-heroi-foto__text {
  margin: 0;
  font-family: 'Raveo', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .86;
}
.bcomu-heroi-foto__pas {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bcomu-heroi-foto__ratlla {
  appearance: none;
  position: relative;
  width: 36px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.bcomu-heroi-foto__ratlla::before,
.bcomu-heroi-foto__ratlla::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
}
.bcomu-heroi-foto__ratlla::before { background: rgb(255 255 255 / .35); }
.bcomu-heroi-foto__ratlla::after {
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.bcomu-heroi-foto__ratlla.on::after {
  animation: bcomu-heroi-avanca var(--bcomu-heroi-durada, 6.8s) linear both;
}
.bcomu-heroi-foto__peu.is-pausat .bcomu-heroi-foto__ratlla.on::after {
  animation: none;
  transform: none;
}
@keyframes bcomu-heroi-avanca { to { transform: scaleX(1); } }
.bcomu-heroi-foto__pausa {
  appearance: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .6);
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.bcomu-heroi-foto__pausa svg { width: 12px; height: 12px; }
.bcomu-heroi-foto__peu button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* La barra de la web sobre la foto: mientras es transparente, logo,
   enlaces de campaña y Menú en blanco (como en bcomu-pagina--foto) */
html:has(.e-con.bcomu-heroi-foto) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__logo img {
  filter: brightness(0) invert(1);
}
html:has(.e-con.bcomu-heroi-foto) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__camp {
  --e-nav-menu-divider-color: rgb(255 255 255 / .55);
}
html:has(.e-con.bcomu-heroi-foto) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__camp .elementor-item,
html:has(.e-con.bcomu-heroi-foto) .e-con.bec-header:not(.is-scrolled):not(.is-down) .bec-header__btn--menu .elementor-button {
  color: #FFFFFF;
}

/* La regla general de 44 px (más arriba, «pointer: coarse» o móvil) haría
   los xips muy altos: quedan bajos y el área de toque la da un ::after */
@media (pointer: coarse), (max-width: 767px) {
  .e-con.bcomu-heroi-foto .bec-submenu-item { min-height: 0; }
  .e-con.bcomu-heroi-foto .bec-submenu-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    translate: 0 -50%;
  }
  .bcomu-heroi-foto__ratlla { height: 44px; }
  .bcomu-heroi-foto__pausa { width: 44px; height: 44px; }
}

/* Móvil: el hero ocupa el 80 % de la pantalla (ajuste de Elementor), así
   que la barra de botones de abajo cae sobre la sección siguiente, no
   sobre el texto. Las rayas van arriba a la izquierda, sin el pie. */
@media (max-width: 767px) {
  .e-con.bcomu-heroi-foto {
    --bcomu-heroi-gutter: 20px;
    --bcomu-heroi-baix: 36px;
    --padding-top: 96px;
    --gap: 18px;
    --row-gap: 18px;
    padding-top: 96px;
    gap: 18px;
  }
  .e-con.bcomu-heroi-foto .bcomu-heroi-foto__titol .elementor-heading-title {
    font-size: clamp(36px, 10.4vw, 48px);
  }
  /* Titular en tres líneas (Remarc 73254, opción 7A del artifact «Retoques
     en el móvil»): los dos <br class="bcomu-salt-mobil"> que pone la
     migración 31 cortan tras el bloque rojo y antes de «ni». La letra se
     ajusta al ancho para que «A Barcelona en comú» / «En Barcelona En
     Comú» quepa entero en la primera línea. */
  .e-con.bcomu-heroi-foto .bcomu-heroi-foto__titol:has(.bcomu-salt-mobil) .elementor-heading-title {
    font-size: min(48px, calc((100vw - 48px) / 9.4));
    line-height: 1.06;
  }
  /* «En Barcelona En Comú» es un 8 % más ancho que «A Barcelona en comú» */
  html[lang^="es"] .e-con.bcomu-heroi-foto .bcomu-heroi-foto__titol:has(.bcomu-salt-mobil) .elementor-heading-title {
    font-size: min(48px, calc((100vw - 48px) / 10.1));
  }
  .bcomu-heroi-foto__titol .bcomu-salt-mobil { display: inline; }

  /* Las anclas (Remarc fc675, opción 1A): fondo oscuro translúcido para
     que se lean sobre cualquier foto, y las cuatro en una línea. En catalán
     caben desde 360 px; si no caben (en castellano, o en un móvil más
     estrecho), la fila se desliza de lado y sale por el borde de la
     pantalla. El padding de arriba y abajo deja sitio al área de toque de
     44 px (::after), que el overflow recortaría. */
  .e-con.bcomu-heroi-foto .bec-submenu {
    flex-wrap: nowrap;
    gap: 6px;
    margin: -7px calc(-1 * var(--bcomu-heroi-gutter)) -7px 0;
    padding: 7px var(--bcomu-heroi-gutter) 7px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .e-con.bcomu-heroi-foto .bec-submenu::-webkit-scrollbar { display: none; }
  .e-con.bcomu-heroi-foto .bec-submenu-item {
    flex: none;
    height: 30px;
    padding: 0 min(8px, 2vw);
    border-color: rgb(255 255 255 / .26);
    background-color: rgb(16 9 12 / .42);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    font-size: min(13px, 3.3vw);
  }
  .bcomu-heroi-foto__peu {
    left: var(--bcomu-heroi-gutter);
    right: auto;
    top: 84px;
    bottom: auto;
    justify-items: start;
    max-width: none;
    text-align: left;
  }
  .bcomu-heroi-foto__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bcomu-heroi-foto__ratlla.on::after { animation: none; transform: none; }
  .e-con.bcomu-heroi-foto > .elementor-background-slideshow::before { animation: none; }
  .e-con.bcomu-pagina--noticia > .elementor-widget.bcomu-pagina__foto::before { animation: none; }
  .e-con.bcomu-heroi-foto .elementor-ken-burns {
    transition: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   Notas de la Sala de premsa (9/11/2026, artifact «Notas de Premsa»:
   1B, 2C, 3C). Lo monta la migración 27 en Premsa y Prensa.

   [bcomu_premsa_notes] (inc/shortcodes.php) pinta todas las notas por
   fecha, sin repetir ninguna: el filtro por origen (enlaces ?origen=…) con
   el recuento, la última nota en grande (__dest) y, debajo, filas con la
   foto pequeña, el titular y dos líneas de entradilla (__fila). Un punto
   de color dice de dónde viene cada una: rojo el grupo municipal, índigo
   el partido. El texto empieza donde el de la cabecera: el contenedor que
   lo envuelve ya tiene 10 px a cada lado (migración 26), por eso aquí se
   resta.

   En la cabecera, debajo de «Per a periodistes», bcomu-rep: los tres
   canales para recibir las notas (Telegram, WhatsApp y correo), un texto
   de Elementor que se edita allí.
   ===================================================================== */

.bcomu-notes {
  display: grid;
  gap: clamp(36px, 4.4vw, 64px);
  padding: clamp(28px, 3.4vw, 48px) max(calc(clamp(20px, 4vw, 56px) - 10px), calc((100% - 1280px) / 2)) 0;
  color: #10090C;
  font-family: 'Raveo', sans-serif;
  scroll-margin-top: 96px;
}
/* Más específico que «:is(.single, .page) .entry-content a» de base.css, que subraya */
section.bcomu-notes :is(.bcomu-notes__filtre, .bcomu-notes__titol, .bcomu-notes__pagines) a { color: inherit; text-decoration: none; }

/* Filtro y recuento */
.bcomu-notes__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.bcomu-notes__filtre {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #F5F5F5;
}
section.bcomu-notes .bcomu-notes__filtre a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: 'Raveo Display', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
section.bcomu-notes .bcomu-notes__filtre a:hover { background: rgb(16 9 12 / .08); }
section.bcomu-notes .bcomu-notes__filtre a[aria-current="page"] { background: #10090C; color: #FFFFFF; }
.bcomu-notes__compte { margin: 0; font-size: 15px; color: #6F6A6C; font-variant-numeric: tabular-nums; }
/* En los archivos (temas, etiquetas, orígenes): origen y año en dos filas,
   con el número de notas de cada pastilla (Remarc f2138, 3B) */
.bcomu-notes__filtres { display: grid; gap: 10px; min-width: 0; }
.bcomu-notes__fila-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.bcomu-notes__nom-f { min-width: 56px; font-size: 14px; font-weight: 500; color: #6F6A6C; }
.bcomu-notes__filtres + .bcomu-notes__compte { align-self: flex-start; padding-top: 12px; }
.bcomu-notes__n { margin-left: .4em; font-size: .82em; font-weight: 400; color: #6F6A6C; font-variant-numeric: tabular-nums; }
section.bcomu-notes .bcomu-notes__filtre a[aria-current="page"] .bcomu-notes__n { color: rgb(255 255 255 / .7); }
/* Debajo del título de un tema: «104 notes des del 2021» */
.bcomu-arxiu-resum { margin: 0; font-size: clamp(15px, 1.1vw, 17px); color: #6F6A6C; font-variant-numeric: tabular-nums; }
/* En la fila de temas de la cabecera, el tema de la página */
.bec-filtres a.bec-filtres__xip[aria-current="page"] { border-color: #10090C; background: #10090C; color: #FFFFFF; }
.bcomu-notes__cap { margin: 0; font-size: 18px; }
section.bcomu-notes .bcomu-notes__cap a { text-decoration: underline; text-underline-offset: 3px; }

/* Lo que comparten la destacada y las filas */
.bcomu-notes__dest,
.bcomu-notes__fila { position: relative; min-width: 0; }
.bcomu-notes__foto { border-radius: 16px; overflow: hidden; background: #F5F5F5; aspect-ratio: 4 / 3; }
.bcomu-notes__foto img,
.bcomu-notes__buit { display: block; width: 100%; height: 100%; object-fit: cover; }
.bcomu-notes__buit { display: grid; place-items: center; }
.bcomu-notes__buit svg { width: 30%; height: auto; fill: #CE0037; }
.bcomu-notes__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.bcomu-notes__meta time { font-size: 14px; color: #6F6A6C; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcomu-notes__orig {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.bcomu-notes__orig::before {
  content: "";
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: #CE0037;
}
.bcomu-notes__orig--organitzacio::before { background: #6248CB; }
.bcomu-notes__tema {
  padding: 5px 11px 6px;
  border: 1px solid rgb(16 9 12 / .22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
}
.bcomu-notes__titol {
  margin: 0;
  font-family: 'Raveo Display', sans-serif;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #10090C;
  text-wrap: balance;
  transition: color .25s ease;
}
/* Toda la nota es el enlace */
.bcomu-notes__titol a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bcomu-notes__titol a:focus-visible { outline: none; }
.bcomu-notes__titol a:focus-visible::after { outline: 2px solid #6248CB; outline-offset: 6px; border-radius: 16px; }
.bcomu-notes__dest:hover .bcomu-notes__titol,
.bcomu-notes__fila:hover .bcomu-notes__titol,
.bcomu-notes__dest:focus-within .bcomu-notes__titol,
.bcomu-notes__fila:focus-within .bcomu-notes__titol { color: #CE0037; }
.bcomu-notes__foto img { transition: scale .6s var(--bcomu-surt, ease); }
.bcomu-notes__dest:hover .bcomu-notes__foto img,
.bcomu-notes__fila:hover .bcomu-notes__foto img { scale: 1.03; }
.bcomu-notes__entra {
  margin: 0;
  font-family: 'EB Garamond', serif;
  color: #3A3236;
}

/* La última, en grande */
.bcomu-notes__dest {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.bcomu-notes__dest-text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.bcomu-notes__etiq {
  padding: 6px 10px 7px;
  border-radius: 8px;
  background: #CE0037;
  color: #FFFFFF;
  font-family: 'Raveo Display', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.bcomu-notes__dest .bcomu-notes__titol { font-size: clamp(28px, 3vw, 46px); line-height: 1.06; letter-spacing: -.025em; }
.bcomu-notes__dest .bcomu-notes__entra { font-size: 20px; line-height: 1.35; max-width: 46ch; }

/* Las demás, en filas con la foto pequeña al lado */
.bcomu-notes__llista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.4vw, 48px) clamp(32px, 4vw, 64px);
}
.bcomu-notes__fila {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
}
.bcomu-notes__fila-text { display: grid; gap: 10px; min-width: 0; }
.bcomu-notes__fila .bcomu-notes__titol { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; }
.bcomu-notes__fila .bcomu-notes__entra {
  font-size: 17px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Más notas / Más recientes */
.bcomu-notes__pagines { display: flex; flex-wrap: wrap; gap: 12px; }
section.bcomu-notes a.bcomu-notes__pag {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1.5px solid #10090C;
  border-radius: 999px;
  font-family: 'Raveo Display', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
section.bcomu-notes a.bcomu-notes__pag:hover,
section.bcomu-notes a.bcomu-notes__pag:focus-visible { background: #10090C; color: #FFFFFF; }

/* En la cabecera: recibir las notas */
.bcomu-pagina__lateral .bcomu-rep p { margin: 0; }
.bcomu-rep {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 16px;
  border-top: 1px solid rgb(16 9 12 / .16);
  color: #10090C;
  font-family: 'Raveo', sans-serif;
  font-size: 16px;
  line-height: 1.35;
}
.bcomu-rep__t { color: rgb(16 9 12 / .7); font-weight: 500; }
.bcomu-rep__canals { display: flex; flex-wrap: wrap; gap: 8px; }
.bcomu-pagina .bcomu-rep__canals a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #6248CB;
  color: #FFFFFF;
  font-family: 'Raveo Display', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color .2s ease;
}
.bcomu-pagina .bcomu-rep__canals a:hover,
.bcomu-pagina .bcomu-rep__canals a:focus-visible { background: #10090C; }

@media (max-width: 1024px) {
  .bcomu-notes__llista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .bcomu-notes__dest { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bcomu-notes__dest .bcomu-notes__entra { font-size: 18px; }
  .bcomu-notes__foto { border-radius: 12px; }
  .bcomu-notes__fila { gap: 14px; }
  .bcomu-notes__fila .bcomu-notes__titol { font-size: 18px; }
  .bcomu-notes__fila .bcomu-notes__entra { font-size: 16px; }
  .bcomu-notes__meta { gap: 6px 12px; }
  section.bcomu-notes .bcomu-notes__filtre a { padding: 0 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .bcomu-notes__foto img { transition: none; }
  .bcomu-notes__dest:hover .bcomu-notes__foto img,
  .bcomu-notes__fila:hover .bcomu-notes__foto img { scale: none; }
}

/* Agenda en el móvil (Remarc 33dc3, opción 5A de «Retoques en el móvil»):
   los filtros y la lista de actos a 10 px del borde, como las demás cajas.
   El contenedor de Elementor que los lleva tiene 2rem a los lados. El resto
   (los filtros plegables) está en el módulo agenda de bcomu-funcions. */
@media (max-width: 767px) {
  .e-con:has(> .e-con > .elementor-widget-shortcode .bec-agenda) {
    --padding-left: 10px;
    --padding-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Contacte en el móvil (Remarc 23d1b, opción 6A de «Retoques en el
   móvil», 10/11/2026). La tarjeta del formulario y el mapa a 10 px del
   borde (la fila llevaba 2rem a los lados y la tarjeta 2rem de relleno: los
   campos medían 224 px de 390). Campos de caja de 48 px con letra de 16 px
   (con menos, Safari amplía la página al tocarlos), la etiqueta encima, los
   temas como píldoras, el mensaje de 140 px y el botón de 52. Va aquí y no
   en contact-form.css porque esa hoja solo se carga en la página catalana. */
@media (max-width: 767px) {
  .elementor .e-con.e-con.bcomu-contacte__fila {
    --padding-left: 0px;
    --padding-right: 0px;
    padding-left: 0;
    padding-right: 0;
  }
  .elementor .e-con.e-con.bcomu-contacte__form {
    --padding-top: 24px;
    --padding-right: 20px;
    --padding-bottom: 26px;
    --padding-left: 20px;
    padding: 24px 20px 26px;
  }
  /* Lo básico de contact-form.css, que en castellano no se carga */
  .bcomu-contacte__form .wpcf7 .wpcf7-form { font-family: 'Raveo Display', sans-serif; }
  .bcomu-contacte__form .wpcf7 .wpcf7-form p { margin: 0; }
  .bcomu-contacte__form .wpcf7 .form-row { gap: 0; margin: 0; }
  .bcomu-contacte__form .wpcf7 .field-wrapper,
  .bcomu-contacte__form .wpcf7 .form-row .field-wrapper { margin: 0 0 16px; }
  .bcomu-contacte__form .wpcf7 .field-wrapper > p {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .bcomu-contacte__form .wpcf7 .field-wrapper > p > br { display: none; }
  .bcomu-contacte__form .wpcf7 .field-label {
    position: static;
    order: -1;
    padding: 0;
    transform: none;
    color: #10090C;
    font-family: 'Raveo Display', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .bcomu-contacte__form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio) {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgb(16 9 12 / .14);
    color: #10090C;
    font-family: 'Raveo Display', sans-serif;
    font-size: 16px;
    letter-spacing: 0;
  }
  .bcomu-contacte__form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):focus {
    box-shadow: inset 0 0 0 2px #10090C;
  }
  .bcomu-contacte__form .wpcf7 select.wpcf7-form-control {
    padding-right: 40px;
    background-position: right 12px center;
  }
  /* js/contact-form.js le pone height en línea (240 px) */
  .bcomu-contacte__form .wpcf7 textarea.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio) {
    height: 140px !important;
    min-height: 140px;
    padding: 14px;
  }
  /* El hueco de 3rem que Elementor pone sobre el formulario */
  .e-con.bcomu-contacte__form .elementor-widget.elementor-widget-shortcode > .elementor-widget-container { padding: 18px 0 0; }

  /* Temas: píldoras; el radio, invisible, cubre la píldora entera */
  .bcomu-contacte__form .wpcf7 .service-options {
    margin: 0 0 16px;
    padding: 0;
  }
  .bcomu-contacte__form .wpcf7 .service-options > p > label:first-child,
  .bcomu-contacte__form .wpcf7 .service-options label:first-child {
    position: static;
    display: block;
    margin: 0 0 8px;
    transform: none;
    color: #10090C;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-radio,
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-radio[data-has-selection="true"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-list-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgb(16 9 12 / .14);
  }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-list-item input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    transform: none;
    cursor: pointer;
  }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-list-item-label {
    color: #10090C;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
  }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-list-item:has(input:checked) {
    background: #10090C;
    box-shadow: none;
  }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label { color: #FFFFFF; }
  .bcomu-contacte__form .wpcf7 .service-options .wpcf7-list-item:has(input:focus-visible) {
    outline: 2px solid #6248CB;
    outline-offset: 2px;
  }

  /* Privacidad, información y botón */
  .bcomu-contacte__form .wpcf7 .acceptance-cf7 { margin: 4px 0 16px; }
  .bcomu-contacte__form .wpcf7 .wpcf7-acceptance,
  .bcomu-contacte__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
  .bcomu-contacte__form .wpcf7 .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .bcomu-contacte__form .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    transform: none;
  }
  .bcomu-contacte__form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 15px;
    line-height: 1.45;
  }
  .bcomu-contacte__form .wpcf7 .data-protection-toggle {
    padding: 12px 14px;
    font-size: 14px;
  }
  .bcomu-contacte__form .wpcf7 .data-protection-toggle br { display: none; }
  .bcomu-contacte__form .wpcf7 .form-actions { margin-top: 16px; }
  /* El indicador de envío de CF7 bajaba a otra línea bajo el botón */
  .bcomu-contacte__form .wpcf7 .form-actions p { position: relative; }
  .bcomu-contacte__form .wpcf7 .form-actions .wpcf7-spinner {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
  }
  .bcomu-contacte__form .wpcf7 .wpcf7-submit {
    width: 100%;
    height: 52px;
    float: none;
    border-radius: 26px;
    font-size: 16px;
    letter-spacing: 0;
  }

  /* El mapa, un poco más bajo */
  .e-con.bcomu-contacte__mapa > .elementor-widget-google_maps,
  .bcomu-contacte__mapa .elementor-widget-google_maps .elementor-widget-container,
  .bcomu-contacte__mapa .elementor-widget-google_maps .elementor-custom-embed,
  .bcomu-contacte__mapa .elementor-widget-google_maps iframe { min-height: 240px; }
}