/*
 * AFA Escola El Cim — tema v4 · LOS COMPONENTES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Esta es la ÚNICA hoja de componentes del tema. Se carga después del puente de
 * roles de `style.css` y antes del bloque `css` de la variación de estilo, que
 * es lo que permite que una paleta redefina `--afa-r-boto`, `--afa-targeta-*` o
 * `--afa-muntatge` y gane sin un solo `!important`. Ver `functions.php`.
 *
 * ── LAS CUATRO REGLAS CON LAS QUE ESTÁ ESCRITA ─────────────────────────────
 *
 *  1. NI UN COLOR LITERAL. Todo va por rol (`--fons`, `--accio`, `--banda`…) o
 *     por token de marca (`--afa-oliva-fosc`, `--afa-verd-clar`…). Un
 *     hexadecimal aquí sería un sitio donde el cambio de paleta no llega, y
 *     son cuatro paletas × cinco formatos = veinte combinaciones que tienen
 *     que salir de esta misma hoja.
 *  2. CERO `!important`. Las variaciones emiten su CSS después y tienen que
 *     poder ganar sin pelear.
 *  3. NINGÚN `outline: none`. El foco lo declara `style.css` y aquí no se toca.
 *  4. EL MÓVIL VA CON SU COMPONENTE, no en un bloque al final. Un componente
 *     cuyo móvil vive doscientas líneas más abajo es un componente que alguien
 *     va a cambiar a medias.
 *
 * ── LO QUE NO SE PUEDE ESCRIBIR AQUÍ, Y POR QUÉ ────────────────────────────
 *
 * La franja de color a la izquierda de una caja. Es el recurso fácil que hace
 * que un proyecto parezca hecho con la plantilla de otro. Los estados se marcan
 * con FORMA (el punto del eje, la regla que separa), con SÍMBOLO (la flecha) y
 * con PESO tipográfico. El color nunca es la única señal.
 *
 * ── EL ANCHO ──────────────────────────────────────────────────────────────
 *
 * Nada ocupa todo el ancho porque sí: el ancho del contenedor se hereda, así
 * que no decidirlo ES decidir que ocupe todo. Cada bloque de esta hoja dice el
 * suyo, y donde no lo dice es porque lo pone `.afa-ample` o la disposición
 * «constrained» de WordPress (`contentSize` 760px, `wideSize` 1180px).
 *
 * ── SEÑAL DE ESTADO, UNA SOLA EN TODO EL SITIO ────────────────────────────
 *
 * Al pasar por encima, un subrayado de 2px en `--enllac`. Se eligió `--enllac`
 * y no `--accio` porque `--accio` es NEGRO en 5B y en 5E —ahí la acción es el
 * negro, no el naranja— mientras que `--enllac` es `#9B5300` en las cuatro. Es
 * el único rol que se puede dar por naranja siempre.
 * Y no se mueve nada: ni `translateY`, ni escalas, ni sombras que crecen.
 *
 * ── CONTRASTE: TRES COSAS MEDIDAS QUE CONDICIONAN ESTA HOJA ───────────────
 *
 *  · `--banda-accent` SOLO vale como forma decorativa. En 5B es `#E07B00`
 *    sobre blanco: 2,52:1. No pasa ni el umbral de texto grande. Por eso el
 *    cintillo lo usa para el punto y nunca para una palabra.
 *  · Sobre una banda hay UNA sola tinta (`--banda-tinta`). La jerarquía la
 *    hacen el tamaño y el peso, no un segundo color: no existe ningún rol que
 *    sea legible sobre `--banda` en las cuatro paletas además de ese.
 *  · Lo pasado del eje NO se atenúa con `opacity`. Con 0,55 sobre crema el
 *    texto de `--tinta-2` cae a 2,22:1. Se atenúa con COLOR
 *    (`--afa-tinta-3`, 4,70 sobre crema) y la opacidad se reserva al punto y
 *    a la línea, que no son texto. Medido en `06-CONTRASTOS.md` §5.
 *
 * ── DEUDA CONOCIDA, ESCRITA AQUÍ PARA QUE NO SE PIERDA ────────────────────
 *
 *  a) `.afa-kicker` (lo emite `inc/blocs.php`) y `.afa-etiqueta` (lo declara
 *     `style.css`) son LA MISMA cosa con dos nombres. Aquí se redeclara la
 *     tipografía de la etiqueta para `.afa-kicker` porque no puedo tocar
 *     ninguno de los dos ficheros. Lo que corresponde: que `style.css` agrupe
 *     `.afa-etiqueta, .afa-kicker` y esta redeclaración desaparezca.
 *  b) Las plantillas portadas del v3 usan `.afa-conten` donde el contrato dice
 *     `.afa-ample`. Aquí NO hay alias: se renombra el marcado, que es donde
 *     está el error. Mientras no se renombre, esas plantillas salen sin
 *     columna, que es un fallo que se ve a la primera.
 *  c) `--afa-etiqueta` no tiene valor por defecto en `tokens-base.css`: solo lo
 *     ponen las cuatro variaciones. Sin variación activa, `.afa-etiqueta`
 *     pierde el color. Aquí se usa siempre con respaldo.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * 1 · EL ARMAZÓN
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * EL CONTENEDOR NO SE DECLARA AQUÍ. `.afa-ample` lo declara `style.css` con su
 * `max-width`, su `margin-inline` y su `padding-inline`, y es el ÚNICO que pone
 * margen lateral: ni la raíz de `theme.json` (que está a 0 a propósito, porque
 * se sumaba y salía doble) ni las secciones de aquí abajo llevan relleno
 * lateral propio.
 *
 * Las plantillas portadas del v3 traen `.afa-conten` con ese mismo papel. No se
 * le hace alias: dos nombres para una cosa se arreglan renombrando el marcado,
 * que es donde está el error, y no añadiendo un selector que lo perpetúe.
 * Anotado en el informe.
 */

/* La sección. La separación vertical es el único trabajo que hace. */
.afa-seccio { padding-block: var(--afa-seccio); }

/* La que destaca: cambia de papel, no de tamaño. */
.afa-seccio--alt { background: var(--fons-alt); }

/*
 * La banda llena. Es la que más cuidado pide, porque `--banda` va de oliva
 * oscuro (5A, 5C) a negro (5E) y a BLANCO (5B): el mismo nombre con tres
 * comportamientos. De ahí las dos decisiones de aquí abajo.
 */
.afa-seccio--banda {
  background: var(--banda);
  color: var(--banda-tinta);
  /* En 5B la banda es blanca sobre fondo blanco: sin la regla no se ve dónde
     empieza. En las otras tres el borde queda dentro del color y no molesta. */
  border-block: var(--afa-regla);
}
.afa-seccio--banda :where(h1, h2, h3, h4, strong) { color: var(--banda-tinta); }

/*
 * Un enlace sobre banda va SIEMPRE subrayado, y no es estética: no hay ningún
 * rol legible sobre `--banda` en las cuatro paletas que no sea `--banda-tinta`,
 * así que el color no puede distinguir un enlace del texto. Lo hace la forma.
 */
.afa-seccio--banda a {
  color: var(--banda-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.afa-seccio--banda a:hover { text-decoration-thickness: 2px; }

/* La línea que separa secciones. En 5E es negra de 1px y forma parte del
   carácter; en las otras tres es la vora clara. Lo decide `--afa-regla`. */
.afa-regla { border-top: var(--afa-regla); }
.afa-regla--forta { border-top: 2px solid var(--tinta); }

/*
 * EL MONTAJE DE 5C. `--afa-muntatge` vale 0 en tres paletas y -56px en 5C
 * (-46px por debajo de 780px, que lo fija la propia variación). Con 0 esta
 * clase no hace absolutamente nada, que es justo lo que tiene que pasar.
 * `position: relative` para que lo montado quede por encima de la banda.
 */
.afa-muntatge {
  margin-top: var(--afa-muntatge);
  position: relative;
}

/* El titular de sección. `.afa-h2` es el nombre del v3 y llega con las
   plantillas portadas; alias, no duplicación. */
.afa-titol,
.afa-h2 {
  font-size: var(--afa-t-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  margin: 0;
}
.afa-h2--lleuger { font-weight: 300; }

/*
 * El display: el titular grande de portada y de cabecera de sección.
 * `.afa-hero__titol` es el nombre que usan los patrones de portada. Alias, no
 * duplicación: una sola regla con dos selectores. Anotado en el informe.
 */
.afa-h1,
.afa-hero__titol {
  font-size: var(--afa-t-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.032em;
  margin: 0;
}
.afa-h1--seccio { font-weight: 300; letter-spacing: -.028em; }

/*
 * La segunda línea del titular. En 5A va en oliva oscuro (7,61 sobre crema) y
 * dentro de una banda tiene que cambiar o desaparece contra el fondo.
 */
.afa-hero__titol-2 { color: var(--afa-oliva-fosc); }
.afa-seccio--banda .afa-hero__titol-2,
.afa-franja--hero .afa-hero__titol-2 { color: var(--banda-accent); }

/*
 * La etiqueta de sección, versión `.afa-kicker`. Ver la deuda (a) de arriba:
 * es la misma cosa que `.afa-etiqueta` de `style.css` y aquí se redeclara
 * porque no puedo tocar ese fichero ni `inc/blocs.php`, que es quien emite
 * este nombre. El respaldo del color existe porque `--afa-etiqueta` solo lo
 * declaran las variaciones.
 */
.afa-kicker {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--afa-etiqueta, var(--afa-oliva-fosc));
  margin: 0;
}
.afa-kicker--taronja { color: var(--enllac); }
.afa-kicker--suau    { color: var(--tinta-2); }
/* «navy» es el nombre heredado del v3, donde la portada de revista iba sobre
   marino. En la v4 ese bloque va sobre banda, así que la tinta es la de banda. */
.afa-kicker--navy    { color: var(--banda-tinta); }

/* La entradilla y el texto largo. El `max-width` en `ch` es lo que impide que
   una línea de 1180px se vuelva ilegible en una pantalla ancha. */
.afa-lede,
.afa-hero__lede {
  font-size: var(--afa-t-h3);
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 16px 0 0;
  max-width: 46ch;
}
.afa-text-llarg {
  font-size: var(--afa-t-cos);
  line-height: 1.72;
  color: var(--tinta-2);
  margin: 0;
  max-width: 46ch;
}

/* El salto al contenido. Existe fuera de pantalla y aparece al enfocarlo: es
   la única forma de saltar la cabecera para quien navega con teclado. */
.afa-salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accio);
  color: var(--accio-tinta);
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 var(--afa-r-petit) 0;
}
.afa-salta:focus { left: 0; }

/*
 * El enlace estirado: cubre toda la caja que lo contiene sin envolverla en un
 * `<a>`. Lo usan la tarjeta de servicio y la de fecha, donde el enlace es el
 * título pero el objetivo tocable tiene que ser la tarjeta entera.
 */
.afa-estirat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* El icono. El tamaño va aquí y la pintura en los atributos del SVG, que usan
   `currentColor`: así el icono sigue al texto sin que ninguna clase se acuerde. */
.afa-icona {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
}

/*
 * EL REVELADO no se declara aquí. `.afa-reveal` / `.es-veu`, su respaldo
 * `.no-js` y su `prefers-reduced-motion` viven en `tokens-base.css`, que es el
 * fichero que carga todo el mundo. Escribirlo también aquí sería la segunda
 * copia de la única animación del sitio.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * 2 · LOS BOTONES
 *
 * `.afa-boto`, `--primari` y `--secundari` los declara `style.css`. Aquí van
 * las variantes de tamaño y los estados, que el paquete de diseño NO dibuja:
 * las referencias son estáticas y no tienen ni un estado de ratón.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-boto,
.afa-boto-bloc > .wp-block-button__link {
  /* El suelo tocable lo pone `style.css` con `min-height: 44px`. Aquí solo lo
     que hace falta para que el texto no se parta y el botón no se estire. */
  font-size: var(--afa-t-petit);
  line-height: 1.2;
  text-align: center;
  gap: 8px;
  transition: background-color .18s var(--afa-corba),
              color .18s var(--afa-corba),
              border-color .18s var(--afa-corba);
}

/*
 * El estado de ratón del botón principal: `filter` y no un color.
 *
 * Es la única forma de oscurecer «la acción» sin saber de qué color es: en 5A y
 * 5C es naranja y en 5B y 5E es negro. Un token de «acción pulsada» habría sido
 * un color más que mantener en cuatro sitios, y un `opacity` bajaría también el
 * contraste del texto de encima, que está medido a 5,80:1.
 */
.afa-boto--primari:hover,
.afa-boto-bloc--primari > .wp-block-button__link:hover  { filter: brightness(.90); }
.afa-boto--primari:active,
.afa-boto-bloc--primari > .wp-block-button__link:active { filter: brightness(.82); }

/* El secundario invierte. Es `--tinta` sobre `--fons`, que es la pareja del
   cuerpo de texto: pasa AA en las cuatro paletas por construcción. */
.afa-boto--secundari:hover,
.afa-boto--secundari:active,
.afa-boto-bloc--secundari > .wp-block-button__link:hover,
.afa-boto-bloc--secundari > .wp-block-button__link:active {
  background: var(--tinta);
  color: var(--fons);
}

/* El de la cabecera y el de dentro de una tarjeta. Sigue midiendo 44px de alto:
   «pequeño» es el texto y el acolchado lateral, nunca el objetivo tocable. */
/*
 * ── EL BOTÓ PETIT ES POT TOCAR ENCARA QUE ES VEGI PETIT ──────────────────
 *
 * A la portada Diari el botó de la capçalera fa **33,6 px d'alt**, per sota
 * dels 44 que demanen WCAG 2.5.5 i Apple. Mesurat el 21 de setembre a
 * `afa.deivid.net`, i és el botó més important del lloc: «Fes-te soci».
 *
 * Fer-lo créixer arreglaria la mida i **mouria la portada**, que és disseny
 * aprovat i no una errada meva. Així que el que creix és **l'àrea de toc, no
 * el botó**: un pseudoelement que surt 6 px per dalt i per baix dona 45,6 px
 * de diana sense canviar ni un píxel del que es veu ni de la maquetació —
 * a la fila de 64 px hi cap de sobres.
 *
 * `position: relative` al botó i `inset` negatiu al fill: el pseudoelement
 * no ocupa lloc al flux, o sigui que no empeny res. La mesura de comprovació
 * és la del `::after`, no la del botó.
 */
.afa-boto--petit {
  font-size: var(--afa-t-meta);
  padding-inline: 18px;
  position: relative;
}
.afa-boto--petit::after {
  content: "";
  position: absolute;
  inset: -6px 0;
  /* Cap fons i cap vora: és diana, no decoració. */
}

/*
 * Una acción suelta NO ocupa todo el ancho. `.afa-boto` es `inline-flex`, así
 * que por defecto se ajusta a su contenido; esta clase existe para el caso
 * contrario, el botón de enviar de un formulario, donde sí se quiere la barra.
 */
.afa-boto--ple { display: flex; width: 100%; }

/*
 * Dentro del bloque de alta el fondo YA es `--accio`: un botón principal ahí
 * sería naranja sobre naranja. Se invierte, y el ratio es exactamente el mismo
 * par medido, solo que del revés.
 */
.afa-alta .afa-boto--primari {
  background: var(--accio-tinta);
  color: var(--accio);
}
.afa-alta .afa-boto--secundari {
  color: var(--accio-tinta);
  border-color: var(--accio-tinta);
}
.afa-alta .afa-boto--secundari:hover {
  background: var(--accio-tinta);
  color: var(--accio);
}

/* El botón de WordPress (bloque `core/button`) hereda de `theme.json`; aquí
   solo se le da el suelo tocable, que el núcleo no garantiza. */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }

/* La píldora: un enlace-etiqueta, no un botón. */
.afa-pilula {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--vora);
  border-radius: var(--afa-r-pill);
  font-size: var(--afa-t-petit);
  color: var(--tinta);
  text-decoration: none;
}
.afa-pilula:hover { border-color: var(--tinta); color: var(--tinta); }
.afa-pilules { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 3 · CABECERA Y NAVEGACIÓN
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-capcalera {
  background: var(--fons);
  border-bottom: var(--afa-regla);
}

/*
 * El modificador de banda existe para 5C (cabecera dentro del bloque verde) y
 * para 5E (cabecera negra). NO se puede resolver desde esta hoja sin saber qué
 * paleta está activa, así que lo pone el marcado o el bloque `css` de la
 * variación. Aquí está declarado para que exista un solo sitio donde se defina.
 */
.afa-capcalera--banda {
  background: var(--banda);
  color: var(--banda-tinta);
  border-bottom-color: transparent;
}

.afa-capcalera__fila {
  max-width: var(--afa-ample);
  margin-inline: auto;
  padding: 14px var(--afa-marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* `min-height: 44px` medido, no supuesto: el banner mide 34px de alto (28 en
   móvil) y el enlace del logotipo se quedaba en un objetivo tocable de 28px,
   que es el primero que se toca al equivocarse de sitio. La imagen no crece;
   crece el área. */
.afa-marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  /*
   * PIDE 216 Y CEDE. `flex: none` era lo que había, y con el logotipo en UNA
   * sola pieza —desde el 24 de septiembre, que dejó de haber versión corta para
   * el móvil— eso dejaba la fila pidiendo más ancho del que hay: medido, el
   * bloque de navegación acababa en 405 de 375, con el botón cortado.
   *
   * 216px son los 30px de alto de la referencia, en ancho (el lockup mide
   * 7,21:1). `min-width: 0` porque sin él un elemento flex no baja de su
   * contenido mínimo, que es la trampa de flexbox que este tema ya ha pisado
   * con el correo largo y con el menú.
   */
  flex: 0 1 216px;
  min-width: 0;
}
.afa-marca:hover { color: var(--tinta); }
.afa-marca__banner { height: 34px; width: auto; display: block; }
.afa-capcalera--banda .afa-marca { color: var(--banda-tinta); }

.afa-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--afa-t-cos);
  /* La trampa clásica de flexbox: un hijo no se encoge por debajo de su
     contenido mínimo. Sin esto, un menú largo empuja la cabecera fuera. */
  min-width: 0;
  /* Y en la fila de la cabecera es la MARCA la que cede: la hamburguesa y el
     botón son objetivos táctiles y encogerlos es perder función. */
  flex: 0 0 auto;
}
/* `display: flex` explícito: lo pone también la hoja del bloque de navegación
   del núcleo, pero esa se encola bajo condiciones (carga diferida de CSS por
   bloque) y si no llega, la cabecera se apila en vertical. Repetirlo aquí no
   duplica ninguna decisión de diseño: garantiza la que ya hay. */
.afa-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.afa-nav .wp-block-navigation a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: var(--afa-t-cos);
}
.afa-nav .wp-block-navigation a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* La página en la que estás: peso Y subrayado. Nunca solo el color. */
.afa-nav .current-menu-item > a,
.afa-nav .current_page_item > a,
.afa-nav [aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--accio);
}
.afa-capcalera--banda .afa-nav .wp-block-navigation a { color: var(--banda-tinta); }
.afa-capcalera--banda .afa-nav [aria-current="page"] {
  box-shadow: inset 0 -2px 0 0 var(--banda-accent);
}

/*
 * EL MENÚ DE MÓVIL. El paquete de diseño no lo dibuja cerrado ni dibuja el
 * botón de abrirlo: la referencia de 375px lo enseña YA desplegado. Así que
 * la forma cerrada, la del botón y la de la superposición son decisiones mías.
 *
 * ── VA SOBRE LA BANDA, Y ESO CORRIGE LA PRIMERA VERSIÓN ──────────────────
 *
 * Era crema sobre crema, con las entradas en tinta secundaria: David lo abrió
 * en su iPhone y dijo que quedaba «muy horrible». Tenía razón, y el diagnóstico
 * es que **abrir el menú no se notaba**: mismo fondo que la página, texto
 * apagado y medio folio en blanco debajo. Parecía que la página se hubiera
 * vaciado, no que se hubiera abierto un panel.
 *
 * Ahora es la tercera banda del marco —arriba el cintillo, abajo el pie, y
 * esta— con `banda-tinta` sobre `banda`, una pareja que `bin/contrast.php` ya
 * mide para las cuatro paletas, así que no hay que elegir un color nuevo.
 *
 * Las entradas van a la IZQUIERDA y al mismo canalón que el logotipo que queda
 * justo encima: alineadas a la derecha, el ojo busca el principio de cada
 * palabra en un sitio distinto porque no miden lo mismo. Y ocupan la fila
 * entera, así que lo que se toca es la fila y no las cinco letras de «Cerca».
 */
.afa-nav .wp-block-navigation__responsive-container-open,
.afa-nav .wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.afa-nav .wp-block-navigation__responsive-container.is-menu-open {
  /* El bloque ya lo pinta con `overlayBackgroundColor` en `parts/header.html`;
     esto es lo que se ve si algún día se quita ese atributo. */
  background: var(--banda);
  color: var(--banda-tinta);
  /* El canalón del marco cuando lo hay, y el margen del tema cuando no: así las
     entradas empiezan en la MISMA x que el logotipo que queda justo encima.
     Medido: 20 contra 14 antes de igualarlo, que es de los desajustes que se
     ven sin saber por qué. */
  padding: 8px var(--marc-canal, var(--afa-marge)) var(--marc-canal, var(--afa-marge));
}
.afa-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
}
.afa-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0;
  width: 100%;
  /*
   * `stretch` y `flex-start`, y los dos hacen falta.
   *
   * El bloque de navegación lleva `justifyContent: right` para la barra de
   * escritorio, y al abrirse en columna eso pasa a ser el eje cruzado: WordPress
   * pone `align-items: center` con su `.is-layout-flex`, así que cada entrada se
   * encogía a su texto y la clase de justificación las pegaba a la derecha. El
   * resultado medido: seis anchos distintos —40, 92, 127, 107, 78, 54— cada uno
   * empezando en un sitio, y la raya de separación tan corta como la palabra.
   *
   * Con `stretch` la entrada ocupa la fila, así que la raya cruza y lo que se
   * toca es la fila entera. El `flex-start` es para el eje principal, que en
   * columna es el vertical: sin él, seis entradas se repartirían por los 812px
   * de alto en vez de empezar arriba.
   */
  align-items: stretch;
  justify-content: flex-start;
}
.afa-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item { width: 100%; }
.afa-nav .wp-block-navigation__responsive-container.is-menu-open a {
  min-height: 56px;
  width: 100%;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  /* La raya sale del propio color del texto, rebajado: así vale para las cuatro
     paletas sin inventar un token de borde para un sitio solo. */
  border-bottom: 1px solid color-mix(in srgb, var(--banda-tinta) 22%, transparent);
  color: var(--banda-tinta);
}
.afa-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child a { border-bottom: 0; }
.afa-nav .wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] {
  color: var(--banda-accent);
  font-weight: 700;
  box-shadow: none;
}

/*
 * ENTRE 600 Y 1080px LA CABECERA NO CABE, y es un fallo ya pisado en el v3.
 *
 * El menú desplegable del núcleo no entra hasta 600px, así que en esa franja
 * conviven el logotipo, cuatro enlaces y un botón. Lo que se retira es el
 * BOTÓN, que está además en el hero, en el alta y en el pie.
 *
 * Y se retira solo en esa franja: por debajo de 600px los enlaces ya están
 * dentro de la hamburguesa y el botón vuelve a caber. La referencia de móvil lo
 * mete dentro del menú desplegado, y eso no se puede hacer desde CSS —el botón
 * es hermano del contenedor de la superposición, no hijo—, así que se queda en
 * la barra, pequeño. Anotado para quien pueda tocar `parts/header.html`.
 */
@media (min-width: 600px) and (max-width: 1080px) {
  .afa-capcalera .afa-boto--primari { display: none; }
}

@media (max-width: 599px) {
  /*
   * `flex-wrap: wrap` es el cinturón, no el diseño.
   *
   * Por debajo de 600px los enlaces se van dentro de la hamburguesa y logotipo,
   * hamburguesa y botón caben en 375px (medido: 122 + 44 + 112 y 343 de hueco).
   * Pero si el menú NO colapsa —porque la hoja del bloque de navegación del
   * núcleo no haya llegado, o porque alguien cambie `overlayMenu`— lo que pasa
   * sin esto es que el botón se sale de la pantalla y arrastra el ancho de todo
   * el documento. Con esto baja de línea, que es feo y no rompe nada.
   */
  .afa-capcalera__fila { padding: 10px var(--afa-marge); gap: 10px; flex-wrap: wrap; }
  .afa-marca__banner { height: 28px; }
  .afa-nav { gap: 4px; }
  .afa-boto--petit { padding-inline: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4 · EL CINTILLO DE AVISOS
 *
 * LA EXCEPCIÓN A «UNA SOLA ANIMACIÓN», Y ESTÁ RAZONADA.
 *
 * `afa_render_ticker()` trae hasta OCHO avisos vigentes y duplica la lista a
 * propósito «para que el bucle de la animación no tenga costura». O sea que el
 * desplazamiento no es decoración añadida aquí: es el mecanismo por el que
 * ocho avisos caben en una línea, y está escrito en el bloque, que no es mío.
 * Sin él, la copia duplicada —que lleva su estilo EN LÍNEA y no se puede
 * ocultar sin `!important`— quedaría a la vista.
 *
 * Lo que sí es responsabilidad de esta hoja, y está:
 *  · se para al pasar por encima y al enfocar dentro (WCAG 2.2.2: el contenido
 *    en movimiento tiene que poder pararse, con ratón y con teclado);
 *  · con `prefers-reduced-motion` no se mueve nada y la banda pasa a poder
 *    desplazarse a mano, para que los ocho avisos sigan alcanzables.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-ticker {
  background: var(--banda);
  color: var(--banda-tinta);
  overflow: hidden;
  font-size: var(--afa-t-meta);
  /* En 5B la banda es blanca: sin la línea de abajo no se distingue del papel. */
  border-bottom: var(--afa-regla);
}

.afa-ticker__pista {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 9px var(--afa-marge);
  width: max-content;
  animation: afa-ticker 34s linear infinite;
}
.afa-ticker:hover .afa-ticker__pista,
.afa-ticker:focus-within .afa-ticker__pista { animation-play-state: paused; }

.afa-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 19px de alto medidos sin esto. Un aviso es un enlace dentro de una línea de
     texto y no pide los 44px de un botón, pero sí los 24×24 de WCAG 2.5.8.
     El relleno crece el área sin engordar la banda. */
  padding-block: 4px;
  color: var(--banda-tinta);
  text-decoration: none;
  white-space: nowrap;
}
.afa-ticker__item:hover {
  color: var(--banda-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
 * El punto. Es la ÚNICA cosa del proyecto que usa `--banda-accent`, y solo
 * porque es una forma: en 5B ese rol es naranja sobre blanco (2,52:1) y no
 * serviría para una palabra. En 5A/5C es el dorado del aviso y en 5E el crema.
 */
.afa-ticker__item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--afa-r-pill);
  background: var(--banda-accent);
  flex: none;
}

@keyframes afa-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .afa-ticker { overflow-x: auto; }
  .afa-ticker__pista { animation: none; }
}

@media (max-width: 599px) {
  .afa-ticker__pista { gap: 30px; animation-duration: 24s; }
  .afa-ticker__item { white-space: normal; }
}

/*
 * EL AVISO DE PORTADA — es otra cosa que el cintillo.
 *
 * El cintillo (`.afa-ticker`) es la banda que recorre todas las páginas. Esto
 * es la pieza de la PORTADA, que cada formato coloca donde le toca: una fila en
 * el Diari, una baldosa en el Tauler, una franja en la Cinta, una línea en el
 * Índex. La forma la da el formato; lo común es esto.
 *
 * Si no hay aviso vigente, el patrón NO se renderiza. Un hueco vacío diciendo
 * que no hay avisos es peor que no tener la pieza.
 */
.afa-avis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 0;
  border-block: var(--afa-regla);
}
.afa-avis__etiqueta { color: var(--enllac); }
.afa-avis__titol { font-size: var(--afa-t-h3); font-weight: 600; line-height: 1.3; margin: 0; }
.afa-avis__titol a { color: var(--tinta); text-decoration: none; }
.afa-avis__titol a:hover {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Sobre banda y sobre acción el aviso hereda la tinta de su fondo. */
:is(.afa-seccio--banda, .afa-rajola--avis, .afa-rajola--accio) :is(.afa-avis__etiqueta, .afa-avis__titol, .afa-avis__titol a) {
  color: inherit;
}
:is(.afa-rajola--avis, .afa-rajola--accio) .afa-avis { border-block: 0; padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 5 · EL HERO
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-hero { position: relative; }

.afa-hero__cos {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  align-items: center;
  /* Sin esto, una palabra larga en la columna de texto estira la rejilla y se
     lleva la columna de la derecha fuera de la pantalla. */
  min-width: 0;
}
.afa-hero__cos > * { min-width: 0; }

/*
 * El eslogan en Caveat. NO BAJA DE 24px, y no es una preferencia:
 * `--afa-oliva` da 3,62 sobre crema, que es el umbral de texto GRANDE (3,0).
 * Por debajo de 24px el umbral pasa a 4,5 y ese verde deja de cumplir. La
 * referencia de móvil lo pinta a 22px; aquí se queda en 24 por eso.
 */
.afa-hero__eslogan {
  font-family: var(--afa-font-ma);
  font-size: clamp(24px, 3.4vw, 27px);
  line-height: 1;
  color: var(--afa-oliva);
  margin: 0 0 12px;
}
.afa-hero__eslogan em,
.afa-hero__eslogan strong,
.afa-hero__eslogan-cim {
  color: var(--enllac);
  font-style: normal;
  font-weight: inherit;
}
/* Dentro de la banda verde de 5C el oliva desaparecería contra el fondo. */
.afa-seccio--banda .afa-hero__eslogan,
.afa-capcalera--banda .afa-hero__eslogan { color: var(--banda-tinta); }

.afa-hero__accions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.afa-hero__foto {
  border-radius: var(--afa-r-gran);
  overflow: hidden;
  background: var(--vora);      /* el hueco mientras carga, del tono de la vora */
}
.afa-hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .afa-hero__cos { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}
@media (max-width: 599px) {
  /* Apilados y a todo el ancho de la columna: dos botones de 160px uno al lado
     del otro a 375px dejan el texto en dos líneas cada uno. */
  .afa-hero__accions { flex-direction: column; gap: 9px; }
  .afa-hero__accions > .afa-boto,
  .afa-hero__accions > .wp-block-button { width: 100%; }
  .afa-hero__accions > .wp-block-button > .wp-block-button__link { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 6 · LAS CIFRAS
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-xifres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--afa-gap);
}

/*
 * La cifra ES una tarjeta: mismos tokens, misma declaración. En 5B y 5E los
 * tokens la dejan sin fondo, sin vora y sin acolchado, o sea convertida en una
 * fila con su línea debajo. No hay dos componentes.
 */
.afa-xifra {
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  border-bottom: var(--afa-regla);
  border-radius: var(--afa-targeta-radi);
  padding: var(--afa-targeta-coixi);
  box-shadow: var(--afa-targeta-ombra);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.afa-xifra__valor {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--afa-oliva-fosc);
}
.afa-xifra__etiqueta {
  font-size: var(--afa-t-petit);
  line-height: 1.45;
  color: var(--tinta-2);
}

/* La variante «en línea» del Diari y de la Cinta: la cifra y su etiqueta en la
   misma fila, para que quepan tres en una banda estrecha. */
.afa-xifres--linia .afa-xifra { flex-direction: row; align-items: baseline; gap: 10px; }
.afa-xifres--linia .afa-xifra__valor { font-size: 30px; }

@media (max-width: 599px) {
  .afa-xifres { gap: 10px; }
  .afa-xifra { padding: 12px 10px; }
  .afa-xifra__valor { font-size: 22px; }
  .afa-xifra__etiqueta { font-size: 10.5px; line-height: 1.3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7 · LOS SERVICIOS — tarjeta o fila, UNA sola declaración
 *
 * Aquí está la única divergencia de estructura entre paletas que no se puede
 * resolver con `--afa-targeta-*`: en 5A y 5C los seis servicios son una rejilla
 * de tres columnas de tarjetas, y en 5B y 5E son filas a todo el ancho con el
 * número a la izquierda. Eso no es fondo ni acolchado: es la dirección de la
 * rejilla.
 *
 * Lo decide `--afa-serveis`, que las CUATRO variaciones ya declaran
 * (`targetes` / `files`) y que hasta ahora no leía nadie. Se consulta con una
 * consulta de estilo, que es el único mecanismo que deja la decisión en manos
 * de la paleta, que es donde el diseño la puso.
 *
 * SI EL NAVEGADOR NO SOPORTA CONSULTAS DE ESTILO, gana el caso por defecto:
 * tarjetas. Y en 5B/5E las tarjetas ya vienen sin fondo, sin vora y sin
 * acolchado, así que lo que se ve son tres columnas de texto separadas: se
 * degrada, no se rompe. Es a propósito que el caso por defecto sea 5A, que es
 * la paleta recomendada.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Los patrones de portada emiten `<ul>`/`<li>`: sin el reinicio salen los
   puntos y la sangría del navegador dentro de las tarjetas. */
.afa-serveis,
.afa-xifres { list-style: none; margin: 0; padding: 0; }

.afa-serveis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--afa-gap);
}

.afa-servei {
  position: relative;               /* para `.afa-estirat` */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  border-radius: var(--afa-targeta-radi);
  padding: var(--afa-targeta-coixi);
  box-shadow: var(--afa-targeta-ombra);
}

/* El número es ornamento de retícula, no información: va `aria-hidden` en el
   marcado y por eso puede ir en un tono que no pasa AA. La condición para que
   eso sea defendible es que el nombre del servicio vaya inmediatamente al
   lado, y va. En 5B y 5E la variación lo pone en verde claro. */
.afa-servei__num {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--enllac);
}
.afa-servei__titol {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0;
}
.afa-servei__titol a,
.afa-servei__enllac { color: var(--tinta); text-decoration: none; }
/* `__dada` es el dato corto del índice del Diari (horario, precio); `__text`
   es la descripción larga. Misma pinta, distinto papel, y por eso el Diari
   esconde uno y enseña el otro. */
.afa-servei__text,
.afa-servei__dada {
  font-size: var(--afa-t-petit);
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 0;
}
/* La flecha empuja hacia abajo con `margin-top: auto` para que todas las
   tarjetas de la fila la tengan a la misma altura aunque el texto varíe. */
.afa-servei__fletxa {
  margin-top: auto;
  padding-top: 14px;
  font-size: 20px;
  color: var(--tinta);
  display: flex;
}

/* El estado de ratón: subrayado en el título y nada más. Sin movimiento y sin
   cambiarle el fondo a la tarjeta, que en 5B/5E no tiene fondo que cambiar. */
.afa-servei:hover .afa-servei__titol a,
.afa-servei:focus-within .afa-servei__titol a,
.afa-servei:hover .afa-servei__enllac,
.afa-servei:focus-within .afa-servei__enllac {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@container style(--afa-serveis: files) {
  .afa-serveis {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .afa-servei {
    display: grid;
    grid-template-columns: 42px 200px 1fr auto;
    gap: 18px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: var(--afa-regla);
  }
  .afa-servei__fletxa { margin-top: 0; padding-top: 0; align-self: center; }
}

@media (max-width: 980px) {
  .afa-serveis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .afa-serveis { grid-template-columns: 1fr; }
  .afa-servei { padding: 16px; }
  .afa-servei__titol { font-size: 16px; }
  .afa-servei__text { font-size: 12.5px; line-height: 1.55; }

  /* A móvil la fila pierde la columna del nombre: número y contenido, y punto.
     Con tres columnas a 375px el nombre del servicio cabe en dos letras. */
  @container style(--afa-serveis: files) {
    .afa-servei {
      grid-template-columns: 34px 1fr;
      gap: 12px;
      padding: 14px 0;
      min-height: 44px;
    }
    .afa-servei__titol,
    .afa-servei__text { grid-column: 2; }
    .afa-servei__fletxa { display: none; }   /* el estirado ya cubre la fila */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 8 · LAS PRÓXIMAS FECHAS
 * ═══════════════════════════════════════════════════════════════════════════ */

/* `.afa-dates` es el envoltorio del bloque de agenda en los patrones de
   portada. No aporta geometría propia: existe para que el formato pueda
   engancharse a él, y lo único que necesita es poder encogerse. */
.afa-dates { min-width: 0; }

.afa-agenda {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--afa-gap);
}

.afa-data {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  border-bottom: var(--afa-regla);
  border-radius: var(--afa-targeta-radi);
  padding: var(--afa-targeta-coixi);
  box-shadow: var(--afa-targeta-ombra);
}
.afa-data__dia {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--afa-oliva-fosc);
}
.afa-data__mes {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--afa-etiqueta, var(--afa-oliva-fosc));
}
.afa-data__titol {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 8px;
}
.afa-data__titol a { color: var(--tinta); text-decoration: none; }
.afa-data__meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: var(--afa-t-petit);
  color: var(--tinta-2);
}
.afa-data:hover .afa-data__titol a,
.afa-data:focus-within .afa-data__titol a {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (max-width: 980px) { .afa-agenda { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) {
  .afa-agenda { grid-template-columns: 1fr; gap: 10px; }
  .afa-data { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .afa-data__dia { font-size: 26px; }
  .afa-data__titol { width: 100%; margin-top: 2px; font-size: 16px; }
  .afa-data__meta { margin-top: 0; padding-top: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9 · LAS NOTICIAS
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-noticies {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  align-items: start;
}

.afa-noticia-llista { display: flex; flex-direction: column; gap: var(--afa-gap); }

.afa-noticia {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--afa-gap);
  align-items: center;
  min-width: 0;
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  border-bottom: var(--afa-regla);
  border-radius: var(--afa-targeta-radi);
  padding: var(--afa-targeta-coixi);
  box-shadow: var(--afa-targeta-ombra);
}
.afa-noticia > * { min-width: 0; }
.afa-noticia__foto {
  height: 86px;
  border-radius: var(--afa-r-petit);
  overflow: hidden;
  background: var(--vora);
}
.afa-noticia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afa-noticia__meta {
  font-size: var(--afa-t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.afa-noticia__titol {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 6px 0 0;
}
.afa-noticia__titol a { color: var(--tinta); text-decoration: none; }
.afa-noticia:hover .afa-noticia__titol a,
.afa-noticia:focus-within .afa-noticia__titol a {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* La noticia destacada: la foto es el fondo y el texto va encima. El velo es
   `--tinta` con transparencia, no un color nuevo: lo que hay debajo es una
   fotografía cualquiera y la única forma de garantizar el contraste del titular
   es oscurecerla. La tinta de encima es `--afa-blanc` porque sobre una foto
   oscurecida no hay rol que valga: el velo lo fija esta hoja. */
.afa-noticia-gran {
  position: relative;
  min-height: 380px;
  border-radius: var(--afa-targeta-radi);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--vora);
}
.afa-noticia-gran img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.afa-noticia-gran::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              color-mix(in srgb, var(--afa-negre) 78%, transparent) 0%,
              color-mix(in srgb, var(--afa-negre) 30%, transparent) 46%,
              transparent 100%);
}
.afa-noticia-gran__cos { position: relative; z-index: 1; padding: 30px; color: var(--afa-blanc); }
.afa-noticia-gran__titol {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 8px 0 0;
}
.afa-noticia-gran__titol a { color: var(--afa-blanc); text-decoration: none; }

@media (max-width: 980px) {
  .afa-noticies { grid-template-columns: 1fr; }
  .afa-noticia-gran { min-height: 300px; }
}
@media (max-width: 599px) {
  .afa-noticia { grid-template-columns: 92px 1fr; gap: 12px; }
  .afa-noticia__foto { height: 70px; }
  .afa-noticia__titol { font-size: 16px; }
  .afa-noticia-gran__cos { padding: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 10 · LA ENTREVISTA — portada de revista y sumario
 *
 * El contrato la llama `.afa-entrevista`; `inc/blocs.php` emite `.afa-revista`
 * y `.afa-sumari`. Se estilan los nombres que existen de verdad en el marcado.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-revista {
  display: flex;
  min-height: 60vh;
  background: var(--banda);
  color: var(--banda-tinta);
  border-radius: var(--afa-r-gran);
  overflow: hidden;
}
.afa-revista__portada {
  flex: 1.5;
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: var(--vora);
}
.afa-revista__portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mismo velo y mismo motivo que la noticia destacada: debajo hay un retrato. */
.afa-revista__portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              color-mix(in srgb, var(--afa-negre) 76%, transparent) 0%,
              color-mix(in srgb, var(--afa-negre) 26%, transparent) 50%,
              transparent 100%);
}
.afa-revista__cos {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  z-index: 1;
  color: var(--afa-blanc);
}
.afa-revista__cos .afa-kicker { color: var(--afa-blanc); }
.afa-revista__titol {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 10px 0 0;
}
.afa-revista__titol a { color: var(--afa-blanc); text-decoration: none; }
.afa-revista__lede {
  font-size: var(--afa-t-h3);
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 46ch;
  color: var(--afa-blanc);
}

.afa-sumari {
  flex: 1;
  min-width: 0;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.afa-sumari__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: baseline;
  min-height: 44px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  color: var(--banda-tinta);
  text-decoration: none;
}
.afa-sumari__item:hover { text-decoration: underline; text-underline-offset: 3px; }
.afa-sumari__num { font-size: 19px; font-weight: 700; opacity: .75; }
.afa-sumari__titol {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.afa-sumari__meta { display: block; font-size: var(--afa-t-petit); margin-top: 4px; }
.afa-sumari__peu { font-size: var(--afa-t-petit); line-height: 1.6; margin: 0; }

@media (max-width: 980px) {
  .afa-revista { flex-direction: column; min-height: 0; }
  .afa-revista__portada { flex: none; min-height: 60vh; }
  .afa-revista__cos { left: 22px; right: 22px; bottom: 24px; }
  .afa-sumari { padding: 24px 22px; }
}
@media (max-width: 599px) {
  .afa-sumari__item { grid-template-columns: 30px 1fr; gap: 10px; padding: 14px 0; }
  .afa-sumari__titol { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 11 · EL BLOQUE DE ALTA
 *
 * En el v3 este bloque llevaba un degradado blanco al 26 % encima del naranja y
 * el texto quedaba a 2,97:1. Aquí no hay degradado: fondo `--accio` liso y
 * tinta `--accio-tinta`, que es la pareja medida a 5,80:1 en 5A. Los botones de
 * dentro se invierten (§2).
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-alta {
  background: var(--accio);
  color: var(--accio-tinta);
  border-radius: var(--afa-r-gran);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.afa-alta__titol {
  font-size: var(--afa-t-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--accio-tinta);
}
.afa-alta__text {
  font-size: var(--afa-t-h3);
  line-height: 1.55;
  margin: 0;
  max-width: 48ch;
  color: var(--accio-tinta);
}
.afa-alta a { color: var(--accio-tinta); }

@media (max-width: 599px) {
  .afa-alta { padding: 28px 20px; border-radius: var(--afa-r-carta); }
  .afa-alta > .afa-boto { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 12 · EL PIE
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-peu {
  background: var(--banda);
  color: var(--banda-tinta);
  border-top: var(--afa-regla);
  font-size: var(--afa-t-petit);
}
.afa-peu__fila {
  max-width: var(--afa-ample);
  margin-inline: auto;
  padding: 44px var(--afa-marge);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
}
.afa-peu__fila > * { min-width: 0; }
.afa-peu__marca { height: 44px; width: auto; display: block; }
.afa-peu__dades { line-height: 1.75; margin: 12px 0 0; }

/*
 * Un correo largo no tiene dónde partirse y se lleva la pantalla por delante.
 * Ya costó una pantalla rota en la PWA con
 * `maria.antonia.garcia.puig@gmail.com`. `overflow-wrap: anywhere` parte por
 * donde haga falta antes que desbordar.
 */
.afa-peu a { overflow-wrap: anywhere; }

.afa-peu__col { display: flex; flex-direction: column; }
/*
 * El título de columna se distingue por TAMAÑO Y PESO, no por color: sobre una
 * banda hay una sola tinta legible en las cuatro paletas. `--banda-accent`
 * aquí sería naranja sobre blanco en 5B, 2,52:1.
 */
.afa-peu__titol {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.afa-peu__col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--banda-tinta);
  text-decoration: none;
}
.afa-peu__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.afa-peu__legal {
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font-size: var(--afa-t-meta);
}
.afa-peu__legal a { color: var(--banda-tinta); }

@media (max-width: 980px) { .afa-peu__fila { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 599px) {
  .afa-peu__fila { grid-template-columns: 1fr; gap: 20px; padding: 30px var(--afa-marge); }
  .afa-peu__marca { height: 38px; }
  /* A 375px los objetivos tocables tienen que ser de 44, no de 40. */
  .afa-peu__col a { min-height: 44px; }
}

/*
 * EL PIE DE MARCA de los formatos de portada. No sustituye a `.afa-peu`: es el
 * cierre de la portada, con el eslogan dibujado y el contacto, y lo usan Cinta
 * (sobre banda) e Índex (con regla y sin banda).
 */
.afa-peu-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.afa-peu-marca__eslogan,
.afa-peu__eslogan { height: 46px; width: auto; display: block; }
/* La clase la lleva ahora el `<picture>` —es quien elige la pieza según el
   ancho— y el dibujo la rellena. `width: auto` en el hijo para que cada una de
   las dos piezas conserve SU proporción: 3,68:1 la de dos líneas y 11,01:1 la
   de una. */
.afa-peu-marca__eslogan img { height: 100%; width: auto; display: block; }
/* Dos hijos y nada más: la marca a un lado y los enlaces al otro. El párrafo
   del contacto y su envoltorio se retiraron el 24 de septiembre —ver
   `afa_portada_peu_marca()`— y con ellos el `space-between` vuelve a tener
   exactamente dos cosas que repartir, que es para lo que sirve. */

/*
 * LA LÍNEA DE ENLACES DEL PIE.
 *
 * Es una lista de verdad y no párrafos con separadores: quien navega con
 * teclado o con lector de pantalla necesita saber cuántos enlaces hay y poder
 * saltarlos. El punto volado que se ve entre ellos lo pinta `::after`, así que
 * es decoración y no se lee en voz alta ni se copia al seleccionar.
 */
.afa-peu-marca__enllacos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--afa-t-petit);
}
.afa-peu-marca__enllacos li { display: flex; align-items: center; gap: 10px; }
.afa-peu-marca__enllacos li:not(:last-child)::after {
  content: "·";
  opacity: .5;
}
.afa-peu-marca__enllacos a { text-decoration: none; }
.afa-peu-marca__enllacos a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  /* Con dos hijos cortos ya NO se apila: en un móvil, apilar la marca y dos
     enlaces convertía una banda de 50px en una de 105. Lo único que baja es el
     tamaño del dibujo. */
  .afa-peu-marca { gap: 14px; }
  .afa-peu-marca__eslogan,
  .afa-peu__eslogan { height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 13 · EL EJE DEL CALENDARIO
 *
 * LO PASADO NO SE ATENÚA CON `opacity`. Con 0,55 sobre crema el texto de
 * `--tinta-2` equivale a `#9E9D90` y cae a 2,22:1. Se atenúa con COLOR
 * (`--afa-tinta-3`: 4,70 sobre crema) y la transparencia se reserva al punto y
 * a la línea, que no son texto. Medido en `06-CONTRASTOS.md` §5.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-eix-caixa { container-type: inline-size; }
.afa-eix { position: relative; padding-left: 200px; }
.afa-eix::before {
  content: "";
  position: absolute;
  left: 176px;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: var(--vora);
}

.afa-hito { position: relative; padding-bottom: 26px; }
.afa-hito__mes {
  position: absolute;
  left: -200px;
  top: 0;
  width: 150px;
  text-align: right;
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--afa-etiqueta, var(--afa-oliva-fosc));
}
.afa-hito__punt {
  position: absolute;
  left: -29px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: var(--afa-r-pill);
  background: var(--vora);
  box-shadow: 0 0 0 4px var(--fons);   /* recorta la línea por detrás */
}

.afa-hito__cap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.afa-hito__dia {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--afa-oliva-fosc);
}
.afa-hito__tipus {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--enllac);
}
.afa-hito__titol {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 8px 0 0;
}
.afa-hito__titol a { color: var(--tinta); text-decoration: none; }
.afa-hito__titol a:hover {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.afa-hito__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 8px 0 0;
  max-width: 54ch;
}
.afa-hito__foto {
  height: 240px;
  margin-top: 16px;
  border-radius: var(--afa-r-carta);
  overflow: hidden;
  background: var(--vora);
}
.afa-hito__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* HOY: es el único hito que es una tarjeta, y el punto se hace grande y pasa a
   `--accio`. Dos señales —forma y color—, nunca una sola. */
.afa-hito--ara .afa-hito__cos {
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  border-radius: var(--afa-targeta-radi);
  padding: var(--afa-targeta-coixi);
  box-shadow: var(--afa-targeta-ombra);
}
.afa-hito--ara .afa-hito__punt {
  left: -32px;
  top: 1px;
  width: 15px;
  height: 15px;
  background: var(--accio);
}

/* PASADO: color, no transparencia. La única opacidad es la del punto. */
.afa-hito--passat .afa-hito__titol a { color: var(--afa-oliva-fosc); }
.afa-hito--passat .afa-hito__text,
.afa-hito--passat .afa-hito__dia { color: var(--afa-tinta-3); }
.afa-hito--passat .afa-hito__punt { opacity: .5; }

/*
 * ── LA FORMA COMPACTA DE L'EIX LA DECIDEIX EL CONTENIDOR, NO LA FINESTRA ──
 *
 * Això era `@media (max-width: 720px)` i mirava la pantalla. Funcionava mentre
 * l'eix només vivia a `/calendari/`, que ocupa tota l'amplada; el dia que va
 * entrar dins de la columna de l'agenda del marc —272px en una finestra de
 * 1180— la consulta no saltava i l'eix es dibuixava amb una columna de 200px
 * per al nom del mes dins d'una columna de 272.
 *
 * La pregunta correcta sempre havia estat «quanta amplada TINC», no «quanta en
 * té la pantalla». Amb `@container` es fa la pregunta bona i les declaracions
 * segueixen escrites UNA vegada: l'alternativa era copiar el bloc sencer sota
 * `.afa-vista--calendari`, que és exactament el defecte que aquest projecte té
 * ancorat.
 *
 * El contenidor és `.afa-eix-caixa`, l'embolcall que emet `afa_render_eix()`.
 */
@container (max-width: 720px) {
  /* La etiqueta del mes deja de ser una columna: a 375px no caben 200px de
     margen izquierdo y un título. Pasa a encabezar el hito, que es lo que la
     referencia de móvil hace con el mismo dato. */
  .afa-eix { padding-left: 34px; }
  .afa-eix::before { left: 10px; }
  .afa-hito { padding-bottom: 30px; }
  .afa-hito__mes {
    position: static;
    width: auto;
    text-align: left;
    display: block;
    margin-bottom: 8px;
  }
  .afa-hito__punt { left: -24px; top: 2px; }
  .afa-hito--ara .afa-hito__punt { left: -27px; top: -1px; }
  .afa-hito__dia { font-size: 30px; }
  .afa-hito__titol { font-size: 21px; }
  .afa-hito__foto { height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 14 · LA BÚSQUEDA GUIADA
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-cerca {
  background: var(--banda);
  color: var(--banda-tinta);
  padding: clamp(44px, 7vw, 80px) var(--afa-marge);
}
.afa-cerca__cos { max-width: 900px; margin-inline: auto; }
.afa-cerca__titol {
  font-size: var(--afa-t-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-align: center;
  margin: 0 0 24px;
  color: var(--banda-tinta);
}
.afa-cerca__camp,
.afa-cerca .wp-block-search__input {
  width: 100%;
  box-sizing: border-box;          /* sin esto, relleno + borde se salen a 375px */
  font-family: inherit;
  font-size: var(--afa-t-h3);
  padding: 18px 26px;
  border-radius: var(--afa-r-pill);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: var(--superficie);
  color: var(--tinta);
}
.afa-cerca__camp::placeholder { color: var(--tinta-2); }

.afa-cerca__xips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}
.afa-xip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--afa-r-pill);
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  font-size: var(--afa-t-petit);
  color: var(--banda-tinta);
  text-decoration: none;
}
.afa-xip:hover { color: var(--banda-tinta); border-color: currentColor; }
.afa-xip[aria-current="true"] {
  background: var(--accio);
  border-color: var(--accio);
  color: var(--accio-tinta);
  font-weight: 700;
}

.afa-resultats { margin-top: 38px; }
.afa-resultats__cap {
  font-size: var(--afa-t-petit);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.afa-resultat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 44px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  color: var(--banda-tinta);
  text-decoration: none;
}
.afa-resultat > span:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.afa-resultat__titol { font-size: var(--afa-t-h3); font-weight: 600; letter-spacing: -.02em; }
.afa-resultat__text { font-size: var(--afa-t-petit); line-height: 1.55; }
.afa-resultat__seccio {
  font-size: var(--afa-t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  flex: none;
}
.afa-resultat:hover .afa-resultat__titol {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.afa-cerca__pista { font-size: var(--afa-t-petit); margin: 14px 0 0; }

@media (max-width: 599px) {
  .afa-cerca__camp,
  .afa-cerca .wp-block-search__input { font-size: 16px; padding: 15px 20px; }
  .afa-resultat { grid-template-columns: 1fr; gap: 6px; }
  .afa-resultat__seccio { justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 15 · ARTÍCULO, FICHA, ARCHIVO, GALERÍA
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-article { max-width: 760px; margin-inline: auto; padding-inline: var(--afa-marge); }
.afa-article :where(p, li) { font-size: 17px; line-height: 1.72; color: var(--tinta-2); }
.afa-article :where(h2) { font-size: var(--afa-t-h2); letter-spacing: -.025em; margin-top: 1.8em; }
.afa-article :where(h3) { font-size: var(--afa-t-h3); letter-spacing: -.02em; margin-top: 1.6em; }
.afa-article blockquote {
  border-left: 0;                  /* nada de franja de color a la izquierda */
  border-top: var(--afa-regla);
  border-bottom: var(--afa-regla);
  padding: 20px 0;
  margin: 28px 0;
  font-size: var(--afa-t-h3);
  line-height: 1.5;
  color: var(--tinta);
}
.afa-portada-article {
  border-radius: var(--afa-r-gran);
  overflow: hidden;
  background: var(--vora);
  margin-bottom: 28px;
}
.afa-portada-article img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La ficha de datos: `<dl>` con una fila por dato. */
.afa-fitxa { margin: 24px 0 0; }
.afa-fitxa__fila {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: var(--afa-regla);
}
.afa-fitxa__fila > * { min-width: 0; margin: 0; }
.afa-fitxa__fila dt {
  font-size: var(--afa-t-etiqueta);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
@media (max-width: 599px) {
  .afa-fitxa__fila { grid-template-columns: 1fr; gap: 4px; }
}

.afa-arxiu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.afa-arxiu__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  color: var(--tinta);
  text-decoration: none;
}
.afa-arxiu__foto {
  height: 200px;
  border-radius: var(--afa-r-carta);
  overflow: hidden;
  background: var(--vora);
}
.afa-arxiu__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.afa-arxiu__meta {
  font-size: var(--afa-t-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.afa-arxiu__titol { font-size: var(--afa-t-h3); font-weight: 600; line-height: 1.25; margin: 0; }
.afa-arxiu__item:hover .afa-arxiu__titol {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (max-width: 980px) { .afa-arxiu { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .afa-arxiu { grid-template-columns: 1fr; } }

/*
 * La galería es un carril que se arrastra, no un carrusel: no se mueve sola.
 * `overflow-x: auto` y nunca `hidden`, porque lo que queda a la derecha tiene
 * que poder alcanzarse.
 */
.afa-galeria {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.afa-galeria :where(figure, .wp-block-image) {
  flex: none;
  width: 320px;
  height: 220px;
  margin: 0;
  scroll-snap-align: start;
  border-radius: var(--afa-r-carta);
  overflow: hidden;
  background: var(--vora);
}
.afa-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 599px) {
  .afa-galeria :where(figure, .wp-block-image) { width: 76vw; height: 54vw; }
}

/* El encabezamiento de sección: título a la izquierda, «ver todo» a la derecha.
   `.afa-cap` es el nombre de los patrones de portada. Alias. */
.afa-encapcalament,
.afa-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.afa-mes-enllac,
.afa-cap__sortida {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--afa-t-cos);
  color: var(--enllac);
}
.afa-seccio--banda :is(.afa-mes-enllac, .afa-cap__sortida) { color: var(--banda-tinta); }

/*
 * «Arrossega de costat». No es decoración: el formato Cinta esconde contenido a
 * la derecha del carril y esta frase es la única pista de que hay más. El
 * paquete la declara obligatoria, así que se pinta siempre, no solo si hay
 * ratón.
 */
.afa-cap__arrossega {
  font-size: var(--afa-t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 6px 0 0;
}
.afa-seccio--banda .afa-cap__arrossega,
.afa-franja--dates .afa-cap__arrossega,
.afa-franja--serveis .afa-cap__arrossega { color: var(--banda-tinta); }

/* Dos columnas de texto. */
.afa-dues { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.afa-dues > * { min-width: 0; }
@media (max-width: 980px) { .afa-dues { grid-template-columns: 1fr; gap: 30px; } }

.afa-miniatura {
  border-radius: var(--afa-r-carta);
  overflow: hidden;
  background: var(--vora);
}
.afa-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 16 · EL FORMULARIO DE ALTA
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 14 i no 18: amb l'etiqueta a sobre de cada camp, 18 separava tant que els
   quatre camps no es llegien com un bloc. El buit que hi ha d'haver és entre
   camps, no dins d'un. */
.afa-formulari { display: grid; gap: 14px; max-width: 620px; }
.afa-camp { display: flex; flex-direction: column; gap: 7px; }
.afa-camp label {
  font-size: var(--afa-t-petit);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.afa-camp :where(input, textarea, select) {
  /* Los campos de WordPress no llevan `border-box`: con `width:100%` más
     relleno y borde se salen de la pantalla en móvil. Ya pisado en el v3. */
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
  /* 16px y no menos: por debajo, Safari en iPhone hace zoom al enfocar y deja
     el formulario descuadrado. */
  font-size: 16px;
  padding: 13px 16px;
  min-height: 44px;
  border: 1px solid var(--vora);
  border-radius: var(--afa-r-petit);
  background: var(--superficie);
  color: var(--tinta);
}
.afa-camp :where(input, textarea, select):focus { border-color: var(--tinta); }
/* El texto de ayuda de un campo tiene que pasar 4,5 igual que el texto: nada
   de gris claro. */
.afa-camp ::placeholder { color: var(--tinta-2); opacity: 1; }
.afa-camp--check { flex-direction: row; align-items: flex-start; gap: 11px; }
.afa-camp--check label { text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--tinta-2); }
/* `flex: none` a més de `width: auto`: dins d'un flex, una casella amb
   `width` heretat del camp de text s'estira i empeny la frase a mitja fila.
   És el que passava dins de `.afa-vista--soci`, on `marc.css` li donava el
   100 % per especificitat. */
.afa-camp--check input { width: auto; flex: none; min-height: 0; margin-top: 2px; }

/*
 * EL PEU DEL FORMULARI: l'acceptació a l'esquerra i «Envia» a la dreta.
 *
 * Es llegeixen junts perquè són el mateix pas. `align-items: center` perquè la
 * frase fa dues o tres línies segons l'amplada i el botó centrat hi queda a
 * plom; alineat a dalt, sembla penjat.
 */
.afa-formulari__peu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
}
.afa-formulari__peu .afa-camp--check { flex: 1 1 auto; }
.afa-formulari__peu .afa-boto        { flex: 0 0 auto; }

/* Per sota d'aquí la fila no hi cap i el botó es quedaria en una columna de
   vuitanta píxels: s'apila, i el botó a tot l'ample com la resta d'accions. */
@media (max-width: 559px) {
  .afa-formulari__peu { flex-direction: column; align-items: stretch; gap: 14px; }
  .afa-formulari__peu .afa-boto { width: 100%; }
}

/* La trampa para robots: fuera de pantalla, nunca `display: none` —hay robots
   que lo detectan— y `aria-hidden` en el marcado. */
.afa-trampa { position: absolute; left: -9999px; }

/*
 * La nota. NADA DE FRANJA DE COLOR A LA IZQUIERDA: el estado se marca con una
 * marca circular con el símbolo del validador y con el peso, que es el recurso
 * propio del proyecto.
 *
 * Y `.afa-nota` es un flex, así que su contenido tiene que ir en UN SOLO hijo:
 * con varios, cada uno se convierte en un elemento flex hermano y el mensaje
 * sale en columnas. Ya pisado en el carnet.
 */
.afa-nota {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: var(--afa-regla);
  border-radius: var(--afa-r-carta);
  background: var(--fons-alt);
  font-size: var(--afa-t-cos);
  color: var(--tinta);
}
.afa-nota::before {
  content: "!";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--afa-r-pill);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--afa-t-petit);
  background: var(--tinta);
  color: var(--fons);
}
.afa-nota--ok::before { content: "✓"; background: var(--afa-oliva-fosc); color: var(--afa-blanc); }
.afa-nota--error::before { content: "✗"; }
.afa-nota--ok { border-color: var(--afa-oliva-fosc); }

/* ═══════════════════════════════════════════════════════════════════════════
 * 17 · LOS CINCO FORMATOS DE PORTADA
 *
 * El formato cambia el ORDEN y la geometría de la portada, nunca el color: el
 * color lo ponen los roles y aquí abajo no hay ni uno declarado que no venga de
 * una variable.
 *
 * DOS NOMBRES ACEPTADOS PARA CADA FORMATO, y conviene saber por qué.
 * `codi/formats.css` del paquete de diseño los llama `.fmt-diari`… sin prefijo;
 * el contrato de `PLA-TEMA-V4.md` §1 manda prefijar con `afa-` todo lo del tema
 * y NO lista los formatos. Como las plantillas de portada las escribe otra
 * persona a partir del mismo paquete, esta hoja acepta las dos grafías con un
 * `:is()` —una sola regla, cero declaraciones duplicadas— hasta que el contrato
 * fije una. En cuanto lo fije, se borra la mitad de cada `:is()`.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-portada { max-width: var(--afa-ample); margin-inline: auto; }

/* ── 1 · Diari ──────────────────────────────────────────────────────────── */

/*
 * LA REJILLA VA EN `.afa-diari__cap`, que es lo que la plantilla emite.
 *
 * La primera versión de esta hoja la puso en `.afa-hero__cos`, que es el nombre
 * del contrato y NO es el que la plantilla del Diari usa: el aside de fechas es
 * hermano del hero, no hijo. Con la regla en el sitio equivocado el formato
 * habría salido en una sola columna sin que nada fallara.
 *
 * El filete es una COLUMNA de la rejilla y no un borde, porque el borde de una
 * columna no llega hasta abajo cuando la otra es más alta.
 */
:is(.fmt-diari, .afa-portada--diari) .afa-diari__cap {
  display: grid;
  grid-template-columns: 1.9fr 1px 1fr;
  gap: 26px;
  align-items: start;
}
:is(.fmt-diari, .afa-portada--diari) .afa-diari__cap > * { min-width: 0; }
/* La columna de fechas va DESPUÉS del texto en el DOM —orden de lectura— y se
   coloca en la tercera columna; el filete se dibuja en la segunda. */
:is(.fmt-diari, .afa-portada--diari) .afa-diari__aside {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
:is(.fmt-diari, .afa-portada--diari) .afa-diari__cap::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background: var(--vora);
}
:is(.fmt-diari, .afa-portada--diari) .afa-diari__filet { background: var(--vora); }
/* La columna de fechas NO es una tarjeta: es una columna con filete. */
/*
 * LA COLUMNA ESTRETA DEL DIARI ES DIU DE DUES MANERES, i les dues són la
 * mateixa cosa: `.afa-diari__aside` quan la portada és un document que es
 * recorre, i `.afa-zona--agenda` quan és el marc. El contingut és idèntic —les
 * quatre properes dates en una columna de ~320px— i per tant les regles també.
 *
 * Es fa ampliant el selector i NO copiant el bloc: aquestes vuit declaracions
 * són les que treuen a la data la forma de targeta (fons, vora, cantonades,
 * coixí) i la deixen en una fila amb un filet a sota, que és el que dibuixa la
 * referència. Duplicades, el dia que algú toqui una de les dues, la portada es
 * veuria d'una manera i `/calendari/` d'una altra.
 *
 * I val la pena dir com es va veure: en passar al marc, aquest selector va
 * deixar de casar amb res i les quatre dates van tornar a la seva forma per
 * defecte —una retícula de QUATRE columnes de targetes— dins d'una columna de
 * 320px. Cada data feia 176px d'alt. La fulla no havia canviat; havia canviat
 * el nom del contenidor.
 */
:is(.fmt-diari, .afa-portada--diari) :is(.afa-diari__aside, .afa-zona--agenda) .afa-agenda {
  grid-template-columns: 1fr;
  gap: 0;
}
:is(.fmt-diari, .afa-portada--diari) :is(.afa-diari__aside, .afa-zona--agenda) .afa-data {
  background: none;
  border: 0;
  border-bottom: var(--afa-regla);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 0;
}
:is(.fmt-diari, .afa-portada--diari) :is(.afa-columnes, .afa-hero__columnes) {
  column-count: 2;
  column-gap: 26px;
  column-rule: 1px solid var(--vora);
}
:is(.fmt-diari, .afa-portada--diari) .afa-hero__columnes p { margin-top: 0; }
/* El índice de servicios del pie del diario: dos columnas de filas de una
   línea. `break-inside: avoid` para que una fila no se parta entre columnas. */
:is(.fmt-diari, .afa-portada--diari) .afa-serveis {
  display: block;
  column-count: 2;
  column-gap: 30px;
}
:is(.fmt-diari, .afa-portada--diari) .afa-servei {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border: 0;
  border-bottom: var(--afa-regla);
  border-radius: 0;
  box-shadow: none;
  background: none;
  break-inside: avoid;
}
:is(.fmt-diari, .afa-portada--diari) .afa-servei__text { display: none; }
:is(.fmt-diari, .afa-portada--diari) .afa-servei__fletxa { margin-top: 0; padding-top: 0; }

@media (max-width: 860px) {
  :is(.fmt-diari, .afa-portada--diari) .afa-diari__cap { grid-template-columns: 1fr; }
  :is(.fmt-diari, .afa-portada--diari) .afa-diari__aside { grid-column: 1; }
  :is(.fmt-diari, .afa-portada--diari) .afa-diari__cap::before { display: none; }
  :is(.fmt-diari, .afa-portada--diari) .afa-diari__filet { display: none; }
  :is(.fmt-diari, .afa-portada--diari) :is(.afa-columnes, .afa-hero__columnes),
  :is(.fmt-diari, .afa-portada--diari) .afa-serveis { column-count: 1; }
}

/* ── 2 · Tauler ─────────────────────────────────────────────────────────── */

:is(.fmt-tauler, .afa-portada--tauler) .afa-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 104px;
  gap: var(--afa-gap);
}
.afa-rajola {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--afa-targeta-radi);
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  box-shadow: var(--afa-targeta-ombra);
  color: var(--tinta);
  text-decoration: none;
}
.afa-rajola--2x2 { grid-column: span 2; grid-row: span 2; padding: 22px; }
.afa-rajola--2x1 { grid-column: span 2; }
/* La baldosa del aviso es de color lleno: la única que no es tarjeta. */
.afa-rajola--avis { background: var(--banda); border-color: transparent; color: var(--banda-tinta); }
.afa-rajola--accio { background: var(--accio); border-color: transparent; color: var(--accio-tinta); }
.afa-rajola:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  :is(.fmt-tauler, .afa-portada--tauler) .afa-mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /*
   * Al caer a una columna, las baldosas grandes PIERDEN el `span` y todas
   * miden lo mismo: a partir de aquí la jerarquía la da el orden del DOM y
   * nada más. Por eso ese orden tiene que coincidir con la importancia y no
   * con la posición de escritorio.
   */
  :is(.fmt-tauler, .afa-portada--tauler) .afa-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  :is(.fmt-tauler, .afa-portada--tauler) :is(.afa-rajola--2x2, .afa-rajola--2x1) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ── 3 · Cinta ──────────────────────────────────────────────────────────── */

/*
 * EL RITMO DE FONDOS de la Cinta: banda → claro → acento → blanco → claro →
 * banda. Cada franja ocupa el ancho entero y tiene UN solo fondo; lo que va
 * dentro lo centra `.afa-ample`.
 */
.afa-franja { padding: var(--afa-seccio) var(--afa-marge); }
.afa-franja--carril { padding-right: 0; }   /* la tarjeta cortada a la derecha */

.afa-franja--hero {
  background: var(--banda);
  color: var(--banda-tinta);
  text-align: center;      /* el único formato donde el hero va centrado */
}
.afa-franja--hero :is(h1, .afa-hero__titol) { color: var(--banda-tinta); }
.afa-franja--hero .afa-hero__accions { justify-content: center; }
.afa-franja--hero .afa-hero__lede { margin-inline: auto; }

/* La franja de cifras va en color lleno con la tinta que le corresponde: es la
   pareja medida de `--accio`, la misma del bloque de alta. */
.afa-franja--xifres { background: var(--accio); color: var(--accio-tinta); }
.afa-franja--xifres :is(.afa-xifra__valor, .afa-xifra__etiqueta, .afa-etiqueta) { color: var(--accio-tinta); }
.afa-franja--xifres .afa-xifra { background: none; border: 0; box-shadow: none; padding: 0; }

.afa-franja--dates { background: var(--fons-alt); }
.afa-franja--serveis { background: var(--superficie); }

/*
 * El carril se desplaza de verdad: `overflow-x: auto` y NUNCA `hidden`. La
 * cabecera dice «Arrossega de costat» y tiene que ser cierto.
 * `tabindex="0"` va en el marcado; aquí se garantiza que el foco se vea.
 */
.afa-carril {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.afa-carril__pista { display: flex; gap: 12px; padding-right: var(--afa-marge); }
.afa-carril__item {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--afa-targeta-radi);
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  box-shadow: var(--afa-targeta-ombra);
  color: var(--tinta);
  text-decoration: none;
}
.afa-carril__item--data { width: 210px; }
.afa-carril__item--servei { width: 168px; }
/* La última tarjeta del carril de fechas es LA SALIDA, no un hueco. */
.afa-carril__sortida { width: 210px; justify-content: center; text-align: center; }
.afa-carril__sortida-titol { font-size: var(--afa-t-h3); font-weight: 700; letter-spacing: -.02em; }
.afa-carril__sortida-peu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--afa-t-petit);
  color: var(--tinta-2);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .afa-carril__item--data { width: 78vw; max-width: 260px; }
  .afa-carril__item--servei { width: 62vw; max-width: 220px; }
}

/* ── 4 · Índex ──────────────────────────────────────────────────────────── */

.afa-fila {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr 150px 24px;
  gap: var(--afa-gap);
  align-items: baseline;
  min-height: 44px;
  padding: 18px 0;
  border-bottom: 1px solid var(--vora);
  color: var(--tinta);
  text-decoration: none;
}
.afa-fila > * { min-width: 0; }
.afa-fila:first-child { border-top: 1px solid var(--tinta); }
.afa-fila:last-child { border-bottom: 1px solid var(--tinta); }
.afa-fila__num { font-size: var(--afa-t-petit); font-weight: 700; color: var(--afa-verd-clar); }
.afa-fila__nom { font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.afa-fila__dada { font-size: var(--afa-t-petit); color: var(--tinta-2); }
.afa-fila__fletxa { color: var(--tinta); display: flex; }
.afa-fila:hover .afa-fila__nom {
  text-decoration: underline;
  text-decoration-color: var(--enllac);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* La apertura del Índex: no hay bloque de portada, hay una frase. Las cifras
   van DENTRO del párrafo en negrita, no en cajas — es la regla del formato. */
.afa-index__cap { padding-block: var(--afa-seccio); }
.afa-index__intro { max-width: 46ch; }
.afa-index__intro-text {
  font-size: var(--afa-t-h3);
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 16px 0 0;
}
.afa-index__intro-text strong { color: var(--tinta); }

.afa-peu-dues { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.afa-peu-dues > * { min-width: 0; }

@media (max-width: 720px) {
  /* Cae a número · contenido · flecha, y la dada corta baja bajo el nombre. */
  .afa-fila { grid-template-columns: 38px 1fr 20px; }
  .afa-fila__dada { grid-column: 2; font-size: 12.5px; }
  .afa-fila__nom { font-size: 21px; }
  .afa-peu-dues { grid-template-columns: 1fr; gap: 22px; }
}

/* ── 5 · Carpeta ────────────────────────────────────────────────────────── */

:is(.fmt-carpeta, .afa-portada--carpeta) {
  display: grid;
  grid-template-columns: 218px 1fr;
}
.afa-lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--afa-gap);
  /* Si la columna es más alta que la ventana, hace scroll propio. Cortarse
     sería esconder navegación. */
  overflow-y: auto;
  border-right: var(--afa-regla);
}
.afa-lateral a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-2);
  text-decoration: none;
}
.afa-lateral a:hover { color: var(--tinta); }
.afa-lateral [aria-current="page"] { color: var(--tinta); font-weight: 700; }

/*
 * El índice de la página marca dónde estás con una barra de 2px en `--accio`.
 * Es la ÚNICA barra lateral del proyecto y no es decorativa: es la marca de
 * posición dentro de una lista, no el adorno de una caja. La regla prohibida es
 * la franja de color al lado de una caja de contenido, y esto no lo es.
 */
.afa-lateral__aqui a { border-left: 2px solid transparent; padding-left: 9px; }
.afa-lateral__aqui a[aria-current="true"] {
  border-left-color: var(--accio);
  color: var(--tinta);
  font-weight: 600;
}

.afa-lateral__marca { display: block; min-height: 44px; }
/* 150px d'ample i no 34px d'alt: la peça apilada fa 2,60:1, així que 34 d'alt
   en donaven 88 d'ample i el manual fixa 110 com a mínim perquè «AFA EL CIM»
   es llegeixi. Per sota d'aquest mínim la peça no s'encongeix: es canvia. La
   columna fa 218px, o sigui que hi cap amb marge. */
.afa-lateral__marca img { width: 150px; height: auto; display: block; }
.afa-lateral__peu { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.afa-lateral__contacte { font-size: var(--afa-t-meta); margin: 0; }
.afa-lateral__contacte a { overflow-wrap: anywhere; }
.afa-lateral__nav { width: 100%; }
.afa-lateral__aqui ul { list-style: none; margin: 8px 0 0; padding: 0; }

.afa-fitxes { display: flex; flex-direction: column; gap: 12px; padding: var(--afa-gap); min-width: 0; }

/*
 * EL CHOQUE DE NOMBRE QUE HABÍA QUE EVITAR, Y QUE HAY.
 *
 * `.afa-plafo` es el nombre que propuse para el panel de la Carpeta, justo
 * porque `.afa-fitxa` ya existe: `inc/blocs.php` lo emite como el `<dl>` con
 * los datos de una entrada. La plantilla `portada-carpeta.html` usa
 * `.afa-fitxa` para sus paneles, así que hoy el mismo nombre designa dos cosas.
 *
 * Mientras no se renombre, el panel va ACOTADO al formato Carpeta: así el `<dl>`
 * de una entrada interior no se convierte en un panel. Lo que sigue sin cubrir
 * —y es el motivo de que esto tenga que renombrarse— es un bloque de ficha
 * metido dentro de una portada Carpeta: ahí los dos selectores coinciden y gana
 * el último. Anotado en el informe.
 */
.afa-plafo,
:is(.fmt-carpeta, .afa-portada--carpeta) > * > .afa-fitxa,
:is(.fmt-carpeta, .afa-portada--carpeta) .afa-fitxes > .afa-fitxa {
  border-radius: var(--afa-r-gran);
  padding: 22px;
  background: var(--afa-targeta-fons);
  border: var(--afa-targeta-vora);
  box-shadow: var(--afa-targeta-ombra);
  min-width: 0;
}

/* La ficha del aviso dentro de la Carpeta: misma caja, y el aviso de dentro ya
   pierde sus reglas propias porque hereda el acolchado del panel. */
:is(.fmt-carpeta, .afa-portada--carpeta) .afa-fitxa--avis .afa-avis { border-block: 0; padding: 0; }

@media (max-width: 860px) {
  /* La columna desaparece y el índice de página con ella: a móvil es ruido.
     Sin esto el formato se rompe. */
  :is(.fmt-carpeta, .afa-portada--carpeta) { grid-template-columns: 1fr; }
  .afa-lateral {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: var(--afa-regla);
  }
  .afa-lateral__aqui { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 18 · LO QUE VALE PARA TODO A PARTIR DE AQUÍ ABAJO
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /*
   * Objetivos tocables de 44px. Es el suelo de WCAG 2.5.5 y de Apple, no una
   * medida elegida. Va con `:where()` para que no suba la especificidad y
   * cualquier componente pueda decir otra cosa sin pelear.
   */
  :where(.afa-portada, .afa-seccio) :where(a.afa-boto, button) { min-height: 44px; }
}

@media (max-width: 599px) {
  /*
   * NADA SE SALE A 375px. Una palabra sin espacios —un correo, una URL— no
   * tiene dónde partirse y empuja el ancho de toda la página. Esto es el
   * cinturón; el tirante son los `min-width: 0` de cada rejilla.
   */
  .afa-seccio :where(p, li, dd, h1, h2, h3) { overflow-wrap: break-word; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RECONCILIACIÓN DEL MOSAICO DEL TAULER
 *
 * Escrito en la integración, y el motivo es la lección: esta hoja y el marcado
 * de las portadas se escribieron EN PARALELO, así que la hoja esperaba
 * `.afa-rajola--2x2` y el marcado emite los componentes con su nombre normal.
 * Ninguno de los dos estaba mal; lo que faltaba era el puente.
 *
 * Sin estas reglas la rejilla de cuatro columnas daba a CADA sección una celda
 * de 261px —el hero, las seis tarjetas de servicio y las cuatro fechas, todos
 * del mismo tamaño y en columna—, que es lo contrario del formato: en el Tauler
 * **la medida ES la jerarquía**.
 *
 * `display: contents` en los contenedores de servicios y cifras es lo que hace
 * que sus hijos suban a la rejilla y ocupen una baldosa cada uno, en vez de
 * apretarse los seis dentro de una sola celda.
 * ═══════════════════════════════════════════════════════════════════════════ */

.fmt-tauler .afa-hero,
.fmt-tauler .afa-dates      { grid-column: span 2; grid-row: span 2; }
.fmt-tauler .afa-avis,
.fmt-tauler .afa-noticies   { grid-column: span 2; }
.fmt-tauler .afa-serveis,
.fmt-tauler .afa-xifres     { display: contents; }

/* Las etiquetas de sección son rótulos, no baldosas: cruzan la fila entera. */
.fmt-tauler .afa-mosaic > .afa-etiqueta { grid-column: 1 / -1; }

/* Y en la Cinta, la tarjeta de salida tiene que caer DENTRO de la pista
   arrastrable, no al lado: sin esto se queda fuera del carril. */
.afa-carril__pista .afa-agenda { display: contents; }

/* Por debajo de 860px el mosaico deja de ser mosaico: todas las baldosas miden
   igual y el orden del DOM —que es el de importancia— se convierte en la única
   jerarquía. Es lo que el formato promete cuando no cabe. */
@media (max-width: 859px) {
  .fmt-tauler .afa-hero,
  .fmt-tauler .afa-dates,
  .fmt-tauler .afa-avis,
  .fmt-tauler .afa-noticies { grid-column: 1 / -1; grid-row: auto; }
}

/*
 * La línia vertical que separa el hero de l'agenda, al Diari.
 *
 * La referència la fa amb una graella `1.9fr 1px 1fr`: la columna del mig ÉS la
 * línia. Aquí es fa amb una vora esquerra a la columna de l'agenda, que es veu
 * exactament igual i no demana afegir un element buit al marcat només per
 * pintar un píxel.
 *
 * Desapareix quan les dues columnes s'apilen: una vora esquerra en una columna
 * que ja no té res al costat és una ratlla que no separa res.
 *
 * ── I EL COIXÍ VE D'AQUÍ, QUE ABANS ESTAVA A DOS LLOCS ───────────────────
 *
 * La rèplica 1:1 de més avall tornava a declarar aquest mateix selector només
 * per posar-li `padding: 18px 24px 22px`. Un `padding` en forma curta REINICIA
 * el `padding-left`, així que el `clamp(20px, 2.4vw, 32px)` que hi havia escrit
 * aquí no pintava res des del dia que es va escriure l'altre bloc: el valor de
 * debò eren 24px. Dues declaracions del mateix, i la de dalt —la que un va a
 * llegir— era la que mentia. Ara n'hi ha una i diu el que passa.
 */
.fmt-diari .afa-diari__aside {
  border-left: 1px solid var(--vora);
  padding: 18px 24px 22px;
}

@media (max-width: 859px) {
  .fmt-diari .afa-diari__aside { border-left: 0; padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LA RÈPLICA 1:1 DEL DIARI — valors EXTRETS de la referència, no estimats
 *
 * Tot el que hi ha aquí sota surt de llegir els estils en línia de
 * `referencies/7A-diari-5A.html`, un per un. Cap número és una aproximació ni
 * un token de l'escala tipogràfica «que s'hi assembla».
 *
 * PER QUÈ CALIA. La primera versió es va construir contra el SISTEMA —els
 * tokens, el contracte de classes, les regles de contrast— i va sortir vàlida,
 * accessible i sense desbordaments. I no s'assemblava: cinquanta aproximacions
 * petites («això era 10,5px, quin token li poso?») donen una pàgina que no és
 * la que la junta va aprovar. La més cara: una data ocupava 148px d'alçada en
 * comptes de 60, i això sol feia la pàgina 2,3 vegades més alta.
 *
 * Els COLORS sí que van per token, perquè són els mateixos i perquè així les
 * altres tres paletes segueixen funcionant. Les MIDES van literals: són el
 * disseny, no una escala.
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ── AIXÒ D'AQUÍ SOTA ÉS GLOBAL A PROPÒSIT. NO SE LI POSI CAP ABAST ────────
 *
 * El fons de la taula i la caixa de `.wp-site-blocks` van néixer dins d'aquest
 * bloc del Diari i el 20 de setembre es van estendre a TOT el lloc a consciència
 * (commit `4440bb2`, «La capçalera fa caixa amb la resta, i el límit torna a ser
 * el marc»): la web sencera és una targeta que flota sobre el crema fosc, no
 * només la portada.
 *
 * Queda escrit aquí perquè el 21 de setembre, repassant els selectors declarats
 * dues vegades, aquestes tres regles semblaven exactament igual d'«escapades»
 * que la capçalera i el peu. No ho són, i la diferència no es podia deduir
 * llegint el full: calia anar al registre. Qui vingui a posar ordre aquí, que
 * les deixi estar.
 */

/* La composició és una targeta que flota sobre el crema fosc. */
body { background: var(--afa-taula); }

.afa-portada,
.wp-site-blocks {
  max-width: var(--afa-ample);
  margin-inline: auto;
}

.wp-site-blocks {
  border: 1px solid var(--vora);
  border-radius: 18px;
  overflow: hidden;
  background: var(--fons);
  margin-block: 28px;
}

/*
 * ── ON S'ATURA LA PELL DEL DIARI, I PER QUÈ L'ABAST NO POT SER `.fmt-diari` ─
 *
 * El cintell, la capçalera i el peu NO són a dins de `.fmt-diari`: aquesta
 * classe la porta `<main class="afa-marc__cos fmt-diari">` i les tres peces en
 * són GERMANES dins de `.wp-site-blocks` (ho munta `inc/marc.php`). Per això el
 * prefix obvi no serveix —`.fmt-diari .afa-capcalera` no casa amb res— i
 * escriure'l hauria tret la pell del Diari també de la portada, que és
 * justament el que no es pot tocar.
 *
 * Sense cap abast, en canvi, aquestes regles s'aplicaven a TOT el lloc i als
 * cinc formats: la ratlla negra de 2px de `.afa-capcalera__fila` i un botó
 * petit sense el terra tocable de 44px sortien a qualsevol pàgina interior.
 *
 * L'abast bo és «allà on hi ha el marc del Diari», i això inclou les ZONES:
 * `/calendari/` es pinta dins del mateix marc i porta `fmt-diari` encara que la
 * classe de plantilla del `body` digui «arxiu». Per això no val
 * `.page-template-portada-diari`, que és el que `style.css` fa servir per a una
 * altra cosa: es quedaria curt i deixaria la zona amb mitja pell.
 *
 * MESURAT al lloc viu ABANS de triar-lo, que és l'ordre que importa:
 * `.wp-site-blocks:has(.fmt-diari)` casa 1 capçalera a la portada, 1 a
 * `/calendari/` i 0 a `/extraescolars/`.
 *
 * ── I EL `:where()` NO HI ÉS PER GUST ────────────────────────────────────
 *
 * Un abast afegeix classes al selector, o sigui que a més de canviar QUÈ casa
 * canvia QUANT pesa — i `marc.css` carrega DESPRÉS d'aquest full escrivint amb
 * `.afa-te-marc …`, que és (0,2,0). La primera versió d'aquesta correcció es va
 * escriure sense `:where()`, i `:has()` val el que val el seu argument: el
 * selector passava de (0,1,0) a (0,3,0) i li prenia a `marc.css` regles que
 * guanyava. Mesurat al navegador contra el full desplegat: la capçalera de la
 * PORTADA creixia de 64 a 66px, el botó petit baixava de 13 a 12,5px i tot el
 * que hi havia a sota es movia. O sigui que la correcció de les interiors
 * s'hauria pagat trencant la portada, que és el que no es podia tocar.
 *
 * `:where()` no suma res a l'especificitat, així que aquestes regles continuen
 * pesant exactament el que pesaven. Tornat a mesurar amb ell: **cap diferència
 * en 25 elements de la portada, ni a 1280 ni a 375**, i les interiors sí que
 * recuperen la base.
 */

/* ── El cintell ───────────────────────────────────────────────────────── */
/* `.fmt-diari .afa-ticker` hi era al costat de `.afa-ticker` i no casava amb
   res, pel mateix motiu: el cintell no és dins del `<main>`. */
:where(.wp-site-blocks:has(.fmt-diari)) .afa-ticker           { background: var(--banda); padding: 8px 24px; gap: 12px; }
:where(.wp-site-blocks:has(.fmt-diari)) .afa-ticker__etiqueta { font-size: 10px; font-weight: 700; letter-spacing: .12em;
                                                        text-transform: uppercase; color: var(--banda-accent); flex: none; }
:where(.wp-site-blocks:has(.fmt-diari)) .afa-ticker__item     { font-size: 12px; color: var(--banda-tinta); }

/* ── La capçalera ─────────────────────────────────────────────────────── */
:where(.wp-site-blocks:has(.fmt-diari)) .afa-capcalera__fila { border-bottom: 2px solid var(--tinta); padding: 14px 24px; gap: 24px; }
:where(.wp-site-blocks:has(.fmt-diari)) .afa-capcalera       { border-bottom: 0; }
.afa-nav a             { font-size: 13px; color: var(--tinta-2); }
/*
 * ── EL BOTÓ DE LA CAPÇALERA NO ÉS UN ENLLAÇ DEL MENÚ ─────────────────────
 *
 * `.afa-nav a` pesa dues coses (classe + element) i `.afa-boto--primari` només
 * una, així que el gris del menú es posava a sobre del negre del botó i
 * «Fes-te soci» sortia en **#5E6152 sobre el taronja #E07B00: 2,3:1**, quan AA
 * en demana 4,5. Anava així des d'ahir a la nit, quan es van extreure els
 * valors de la referència, i no ho va veure ningú perquè el botó es continuava
 * llegint prou bé per damunt.
 *
 * I `bin/contrast.php` tampoc no podia veure-ho: comprova les parelles de
 * TOKENS —«accio» amb «accio-tinta» passa de sobres— i això no és una parella
 * mal triada, és una cascada que en pisa una de bona. La puerta mira la paleta;
 * aquí el que fallava era el CSS.
 */
.afa-nav .afa-boto--primari { color: var(--accio-tinta); }
.afa-nav .current-menu-item a,
.afa-nav [aria-current] { color: var(--tinta); font-weight: 600; }
/*
 * El botó petit del Diari es menja el terra tocable de 44px (`min-height: 0`)
 * que garanteix `.afa-boto` i que demana WCAG 2.5.5. Va amb l'abast perquè és
 * pell del Diari, i amb l'abast deixa de menjar-se'l a les pàgines interiors.
 * Que se'l mengi a la portada queda anotat a `docs/handoff/G-INFORME.md`: és
 * una decisió de disseny, no de CSS, i no es pren des d'aquí.
 */
:where(.wp-site-blocks:has(.fmt-diari)) .afa-boto--petit { padding: 9px 16px; font-size: 12.5px; min-height: 0; }

/* ── El hero ──────────────────────────────────────────────────────────── */
.fmt-diari .afa-hero__eslogan     { font-size: 24px; line-height: 1; }
.fmt-diari .afa-hero__titol       { font-size: 42px; font-weight: 800; line-height: 1.02;
                                    letter-spacing: -.032em; margin: 8px 0 0; color: var(--tinta); }
.fmt-diari .afa-hero__titol-2     { color: var(--titol-accent, var(--afa-oliva-fosc)); }
.fmt-diari .afa-hero__columnes    { column-count: 2; column-gap: 26px;
                                    column-rule: 1px solid var(--vora); margin-top: 16px; }
.fmt-diari .afa-hero__columnes p  { font-size: 13.5px; line-height: 1.75; color: var(--tinta-2);
                                    margin: 0 0 10px; }
.fmt-diari .afa-hero              { padding: 18px 24px 22px; }

/*
 * LA RÈPLICA DEL DIARI VAL PER A LES DUES FORMES DE BOTÓ.
 *
 * El 24 de setembre el hero va passar a ser contingut editable, i amb això els
 * seus dos botons van deixar de ser `<a class="afa-boto">` per ser
 * `core/button` de veritat (`.afa-boto-bloc > .wp-block-button__link`). La
 * conseqüència no la va dir ningú: aquestes dues regles van deixar de tocar-los
 * i el hero va tornar als valors base —13px en comptes de 13,5, un altre coixí,
 * i el secundari a pes 700 en comptes de 600—. La rèplica 1:1 es va desfer sola
 * i en silenci.
 *
 * Dos selectors d'UNA declaració, no dues còpies: el dia que es torni a moure
 * la pell del Diari, les dues formes es mouen juntes.
 */
.fmt-diari .afa-boto--primari,
.fmt-diari .afa-boto-bloc--primari > .wp-block-button__link {
  padding: 12px 20px; font-size: 13.5px; font-weight: 700; min-height: 0;
}
.fmt-diari .afa-boto--secundari,
.fmt-diari .afa-boto-bloc--secundari > .wp-block-button__link {
  padding: 12px 20px; font-size: 13.5px; font-weight: 600;
  border-width: 1.5px; min-height: 0;
}

/*
 * PERÒ EL BOTÓ D'ENVIAR NO ÉS DEL HERO, i per això recupera el terra tocable.
 *
 * `min-height: 0` és una decisió de disseny presa per a la rèplica de la
 * portada i anotada a `docs/handoff/G-INFORME.md`. El submit d'un formulari no
 * hi entrava: es va menjar el terra de 44px de WCAG 2.5.5 per arrossegament, i
 * és l'únic control del web que completa alguna cosa. Es mesura: 40px abans,
 * 44 ara.
 */
.fmt-diari .afa-formulari__peu .afa-boto--primari {
  min-height: 44px; padding: 0 24px; font-size: var(--afa-t-petit);
}

/* ── L'agenda ─────────────────────────────────────────────────────────── */
/* El coixí de `.afa-diari__aside` viu amb la seva vora esquerra, més amunt. */
.fmt-diari .afa-dates .afa-etiqueta,
.fmt-diari .afa-etiqueta          { font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
                                    padding-bottom: 8px; border-bottom: 2px solid var(--tinta);
                                    display: block; }

/*
 * ── LA FILA DE DATA, EN UN SOL BLOC ──────────────────────────────────────
 *
 * Estava escrita a TRES llocs d'aquest mateix full, i cap dels tres estava
 * «malament»: la forma de dalt, la interlínia del strut i el pas a bloc es van
 * escriure en tres moments diferents i el resultat sortia bé per la cascada.
 * El preu era que llegir-ne un no deia com es pinta la fila.
 *
 * ── LA DATA VA EN UNA LÍNIA, I PER AIXÒ ÉS UN BLOC ───────────────────────
 *
 * Era una columna flex, i dins d'una columna flex un `display: inline` no fa
 * res: tot fill és un bloc. Passant-la a bloc, els dos `span` tornen a ser text
 * corrent, que és el que la referència fa. El `flex-direction` i el `gap` que
 * arrossegava ja no pintaven res sobre un bloc i no s'han conservat: una
 * declaració inerta és una declaració que menteix.
 *
 * ── EL «STRUT», QUE ÉS EL QUE NO ES VEIA ─────────────────────────────────
 *
 * Posar-li la interlínia als dos `<span>` no va canviar res, i el motiu és un
 * detall de com es mesura una línia de text: l'alçada d'una línia no la decideix
 * només el que hi ha escrit, sinó també una caixa invisible —el *strut*— que
 * surt de la MIDA I LA INTERLÍNIA DEL BLOC que la conté. `.afa-data` heretava
 * els 15px i l'1,6 del cos, o sigui un strut de 24px: la línia de «12 SET»
 * mesurava 24 encara que el text en demanés 12,6.
 *
 * Es corregeix al bloc i no als fills. Els dos `<span>` porten la seva pròpia
 * mida, així que baixar-la aquí no canvia ni un píxel del que es veu: només
 * treu la caixa buida que ningú no havia escrit.
 */
.fmt-diari .afa-data              { display: block; padding: 11px 0;
                                    border-bottom: 1px solid var(--vora);
                                    font-size: 10.5px; line-height: 1.2; }
/*
 * «12 SET»: una sola etiqueta petita, no un número gran amb el mes a sota.
 *
 * La interlínia també va escrita: `.afa-data__mes` heretava 1,7 del cos del
 * text i feia que la primera línia de la fila mesurés 18px per a un text de
 * 10,5. Sumat a la resta, la fila sortia a 88px i la de la referència en fa 76;
 * amb quatre dates, aquests 12px de més són 48 i són exactament els que
 * empenyien les tres xifres fora de la columna quan el dock s'obre.
 */
.fmt-diari .afa-data__dia,
.fmt-diari .afa-data__mes         { display: inline; font-size: 10.5px; font-weight: 700;
                                    letter-spacing: .06em; color: var(--enllac);
                                    text-transform: uppercase; line-height: 1.2; }
.fmt-diari .afa-data__dia::after  { content: " "; }
.fmt-diari .afa-data__titol       { display: block; font-size: 13.5px; font-weight: 600;
                                    line-height: 1.3; color: var(--tinta); margin: 2px 0 0; }
/*
 * `margin` i `padding-top` ESCRITS, encara que semblin zero.
 *
 * La forma de targeta de `.afa-data__meta` porta `margin-top: auto` —perquè a
 * la rajola del Tauler la meta s'enganxa al peu— i `padding-top: 8px`. Dins de
 * la fila del Diari això són 21px que no hi ha a la referència, i a quatre
 * dates fan 84px: prou per empènyer les tres xifres fora de la columna.
 *
 * Una fila de data a la referència fa 76px. Amb aquests dos valors en fa 77.
 */
.fmt-diari .afa-data__meta        { display: block; font-size: 11.5px; color: var(--tinta-2);
                                    line-height: 1.45; margin: 0; padding-top: 1px; }

/* ── Les xifres ───────────────────────────────────────────────────────── */
.fmt-diari .afa-xifres            { display: flex; gap: 14px; margin-top: 14px;
                                    padding-top: 12px; border-top: 2px solid var(--tinta); }
/*
 * Cada xifra és una COLUMNA: el número a sobre i l'etiqueta a sota.
 *
 * Sortien totes tres seguides en una línia —«142 sòcies11 extraescolars6
 * comissions»— perquè el contenidor sí que tenia separació però cada xifra no
 * era res: el número i la seva etiqueta eren dos `span` en línia. D'aquí surt
 * el `display: block` del valor, que abans vivia dues-centes ratlles més avall.
 */
.fmt-diari .afa-xifra             { display: flex; flex-direction: column; gap: 1px; }
.fmt-diari .afa-xifra__valor      { display: block; font-size: 24px; font-weight: 800;
                                    letter-spacing: -.03em; line-height: 1.1;
                                    color: var(--afa-oliva-fosc); }
.fmt-diari .afa-xifra__etiqueta   { font-size: 10px; color: var(--tinta-2); }

/* ── Els serveis ──────────────────────────────────────────────────────── */
.fmt-diari .afa-serveis-seccio,
.fmt-diari .afa-seccio--alt       { background: var(--superficie); border-top: 2px solid var(--tinta);
                                    padding: 22px 24px; }
.fmt-diari .afa-servei__num       { font-size: 11px; font-weight: 800; color: var(--enllac);
                                    width: 20px; flex: none; }
.fmt-diari .afa-servei__titol     { font-size: 14px; font-weight: 600; color: var(--tinta); flex: 1; }
.fmt-diari .afa-servei__dada      { font-size: 12px; color: var(--tinta-2); }

/* ── El peu ───────────────────────────────────────────────────────────── */
:where(.wp-site-blocks:has(.fmt-diari)) .afa-peu           { background: var(--banda); padding: 18px 24px; }
:where(.wp-site-blocks:has(.fmt-diari)) .afa-peu__dades,
:where(.wp-site-blocks:has(.fmt-diari)) .afa-peu__contacte { font-size: 11.5px; color: var(--banda-tinta); }

/* ── Dues correccions vistes al navegador de debò ──────────────────────── */

/*
 * L'hamburguesa NO surt a escriptori.
 *
 * Sortia al costat del menú sencer —les dues coses alhora— i a més s'emportava
 * els 39px que li faltaven a la capçalera per cabre: demanava 988 en 938. El
 * bloc de navegació del nucli ja l'amaga per sobre de 600px quan el menú és
 * «mobile»; alguna cosa nostra ho estava pisant.
 */
@media (min-width: 780px) {
  .afa-nav .wp-block-navigation__responsive-container-open { display: none; }
}

/*
 * El Diari no fa servir el coixí genèric de secció.
 *
 * `.afa-seccio` porta `72px 44px`, que és el ritme vertical del sistema. La
 * referència del Diari fa `18px 24px`: les seves seccions estan separades per
 * REGLES, no per aire. Amb els 72 hi havia 96px de buit entre la capçalera i el
 * hero, i el conjunt perdia la densitat de diari que és tot el format.
 */
.fmt-diari .afa-seccio,
.fmt-diari .afa-ample     { padding-block: 0; }
.fmt-diari .afa-portada   { margin-top: 0; }

/*
 * El Diari no porta l'enllaç «Tot el calendari» dins de l'agenda.
 *
 * La referència no el té, i no es perd res: «Calendari» ja és una de les quatre
 * entrades de la capçalera, o sigui que l'enllaç era una segona porta a la
 * mateixa pàgina que a més allargava la columna uns 60px i desquadrava les dues
 * bandes del hero.
 *
 * S'amaga aquí en comptes de treure'l del patró perquè aquest MATEIX patró és
 * el que la Cinta fa servir, i allà l'enllaç sí que hi és: és la targeta de
 * sortida del carril. Queda apuntat com a deute: el net seria una variant del
 * patró, no una regla que amaga.
 */
.fmt-diari .afa-dates .afa-cap__sortida { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * EL RASTRO DEL EDITOR
 *
 * Solo se sirve dentro del editor —`afa_marc_rastre_editor()` lo condiciona a
 * `REST_REQUEST`— así que ningún visitante lo ve nunca. Va deliberadamente feo:
 * es un andamio, no parte del diseño, y confundirlo con la página sería peor
 * que no tenerlo.
 * ═══════════════════════════════════════════════════════════════════════════ */

.afa-rastre {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed var(--vora);
  border-radius: 6px;
  background: var(--fons-alt);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tinta-2);
}
.afa-rastre strong { color: var(--tinta); }

/* ───────────────────────────────────────────────────────────────────────────
 * L'ESTAT BUIT D'UNA SECCIÓ EN PREPARACIÓ
 *
 * No és una caixa amb franja de color a l'esquerra —la regla ancorada del
 * projecte— sinó el mateix recurs que fa servir tota la web per obrir una
 * secció: l'etiqueta en versaletes amb el seu filet, el titular i el text. El
 * que diu que està buit és el TEXT, no un adorn.
 * ─────────────────────────────────────────────────────────────────────────── */

.afa-sense-contingut { max-width: 46ch; }
.afa-sense-contingut__titol {
  font-family: var(--afa-lletra-titol);
  font-size: var(--wp--preset--font-size--h3, 20px);
  font-weight: 700;
  line-height: 1.25;
  margin: 10px 0 8px;
}
.afa-sense-contingut__text { color: var(--tinta-2); margin: 0 0 18px; }