/* Rejilla de tarjetas — la hoja PUBLICA del bloque.

   Casi todo lo que se ve —la rejilla, el marco, el icono, el hover— sigue
   viniendo de `assets/css/sitio.css`, que es la hoja del sitio estatico y ya
   estaba probada. Aqui solo va lo que ese fichero no puede traer: los dos
   añadidos de este bloque (la etiqueta de estado y la tarjeta pulsable).

   Y va en un fichero propio A PROPOSITO, no en `sitio.css`: esa hoja la copia
   `herramientas/montar-tema-wp.py` desde `web/` cada vez que se remonta el
   tema, asi que cualquier cosa escrita alli se pierde en el siguiente montaje
   sin dejar rastro. Lo que vive en `bloques/tarjetas/` sobrevive.

   La version que le pone WordPress a este fichero sale de `block.json`. Si se
   toca esto y no se sube la `version` de alli, la URL no cambia, el navegador
   sirve la copia vieja y parece que el cambio no ha hecho nada.

   Y AHI HAY UN NUDO QUE HAY QUE DESHACER UNA VEZ: `block.json` dice hoy 1.9.2,
   pero `herramientas/montar-tema-wp.py` estampa en TODOS los `block.json` el
   valor de `SINERGIS_VERSION` (`functions.php:22`), que sigue en 1.9.1. O sea
   que el proximo montaje del tema BAJA esta version de vuelta a 1.9.1 sin
   decir nada. Al remontar, subir antes `SINERGIS_VERSION` a 1.9.2: si no, el
   dia que se edite esta hoja el cambio no se vera y se buscara el fallo en el
   CSS, que es donde no esta. */

/* ------------------------------------------------------- etiqueta de estado

   Deliberadamente igual que `.sg-tar__eti` de `bloques/soluciones/estilo.css`:
   mayusculas pequeñas, muy espaciadas y en el gris tenue. El sitio ya tiene un
   rotulo de estado y no le hace ninguna falta un segundo dialecto de badge.
   Si algun dia se retoca uno, hay que retocar el otro.

   El margen se declara porque `sitio.css` da `margin:0 0 1em` a todo `<p>`, y
   1em separa la etiqueta del titulo tanto que dejan de leerse como una unidad. */
.tarjeta .sg-tarj-eti {
  margin: 0 0 .45rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  /* `--suave`, no `--tenue`. Medido sobre el fondo REAL de la tarjeta
     (#10151d): el gris tenue da 4,35:1 y el minimo para 11,2 px es 4,50.
     Sobre el fondo del sitio ese mismo gris da 4,59 y pasa — por eso el
     fallo estuvo escondido: se habia comprobado en la superficie que no
     era. Este da 7,44:1. */
  color: var(--suave, #93a7c1);
}

/* --------------------------------------------------------- tarjeta pulsable

   El enlace de verdad es el TITULO, y lo que cubre la tarjeta entera es un
   `::after` suyo estirado a `inset:0`. Es el mismo patron que `soluciones`, y
   la razon no es de estilo: envolver el `<article>` en un `<a>` mete listas y
   parrafos dentro de un enlace —HTML fragil— y deja al lector de pantalla
   anunciando una caja entera sin nombre. Asi anuncia «enlace: <titulo>».

   `position:relative` en la tarjeta es obligatorio: sin el, ese `inset:0` se
   mide contra la pagina y la zona de clic cubre la pantalla completa. Solo se
   pone en las tarjetas que enlazan, para no cambiarle el contexto de
   posicionamiento a las doce instancias que ya estan guardadas. */
.tarjeta--enlace { position: relative; }

/* Sin esto el titulo pasaria del cian-2 del `h3` al cian de los enlaces y las
   tarjetas pulsables se verian de otro color que el resto. La señal de que se
   puede pulsar ya la da el cursor y el hover que levanta la tarjeta. */
.tarjeta--enlace .sg-tarj-ir {
  color: inherit;
  text-decoration: none;
}

.tarjeta--enlace .sg-tarj-ir::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* La trampa del patron: la capa de clic tapa TODO lo que hay debajo, incluido
   un enlace escrito dentro de una viñeta o del parrafo —que `render.php` deja
   pasar—. Ese enlace se veria pero no se podria pulsar. Subirlo por encima de
   la capa lo devuelve a la vida. */
.tarjeta--enlace .cuerpo a:not(.sg-tarj-ir) {
  position: relative;
  z-index: 1;
}