/* Correcciones de Jaitek sobre JA Kinetic. Lo genera infra/estatico/afinar-jaitek.php.
   T4 carga este fichero el último y las actualizaciones de la plantilla no lo tocan. */

/* --- El logotipo salía ESTIRADO -------------------------------------------------------------
   La plantilla pone `max-height: 40px` sobre una etiqueta que lleva width="600" height="147" en
   el HTML, y la regla general de Bootstrap es `img { max-width:100%; height:auto }`. Con la
   anchura fijada por el atributo y la altura recortada por max-height, la imagen se aplasta: el
   logotipo se servía a 472x40 cuando su proporción pide 163x40, es decir casi TRES VECES más
   ancho de lo que debe. Se ve a simple vista y no lo delata ningún error.
   `width:auto` devuelve el mando a la proporción real. */
.navbar-brand.logo-control img.logo-img,
.navbar-brand.logo-control img.logo-img-sm,
.kinetic-offcanvas img.logo-img,
.kinetic-offcanvas img.logo-img-sm {
  width: auto;
  height: auto;
  max-height: 40px;
}

/* --- Las páginas fijas no llevan miga de pan -------------------------------------------------
   La plantilla pinta «Inicio / Categoría / Título» dentro de TODOS los artículos, sin condición.
   En la portada es una miga cuyo primer eslabón lleva a la página en la que ya estás; en «SaaS»
   salía «Inicio / SaaS / SaaS», que no orienta a nadie. Estas son PÁGINAS, no artículos de un
   blog: dónde estás lo dice el menú de arriba, que además marca la sección activa. En los
   artículos de verdad la miga sí tiene sentido y se deja. */
body.item-103 .hx-article__breadcrumb, body.item-104 .hx-article__breadcrumb, body.item-105 .hx-article__breadcrumb, body.item-106 .hx-article__breadcrumb, body.item-107 .hx-article__breadcrumb, body.item-109 .hx-article__breadcrumb, body.item-110 .hx-article__breadcrumb, body.item-111 .hx-article__breadcrumb, body.item-134 .hx-article__breadcrumb, body.item-135 .hx-article__breadcrumb { display: none; }

/* La cabecera se queda con un hueco de más al quitarle la miga. */
body.item-103 .hx-article__head-inner, body.item-104 .hx-article__head-inner, body.item-105 .hx-article__head-inner, body.item-106 .hx-article__head-inner, body.item-107 .hx-article__head-inner, body.item-109 .hx-article__head-inner, body.item-110 .hx-article__head-inner, body.item-111 .hx-article__head-inner, body.item-134 .hx-article__head-inner, body.item-135 .hx-article__head-inner { padding-top: 2.5rem; }

/* --- Rejilla de logotipos de clientes --------------------------------------------------------
   La monta infra/estatico/clientes-jaitek.php, que rescató las 46 fichas que se habían quedado
   dentro del componente de portafolio de la web antigua.
   `auto-fill` con un mínimo de 120 px: la rejilla decide sola cuántas columnas caben, así que va
   de seis en un portátil a dos en un teléfono sin una sola consulta de medios. El cuerpo del
   artículo mide unos 760 px, así que con 150 salían cuatro baldosas enormes; con 120 salen seis y
   parece lo que es, un muro de logotipos. */
.jtk-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .75rem;
  margin: 1.75rem 0;
}
.jtk-cliente {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Blanco fijo, no un color del tema: son marcas ajenas y no se tiñen con el color de esta web.
     Y no cambia en modo claro/oscuro, porque el logotipo de un cliente no es decoración nuestra. */
  background: #fff;
  border-radius: 10px;
  padding: .6rem;
  aspect-ratio: 1;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.jtk-cliente:hover,
a.jtk-cliente:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 0 0 / .35);
}
.jtk-cliente img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* `contain` y no `cover`: recortar el logotipo de un cliente para que llene la baldosa es
     justo lo que no se puede hacer con la marca de otro. */
  object-fit: contain;
}

/* ==============================================================================================
   COLOR DE MARCA
   ==============================================================================================
   La plantilla viene con un verde lima (#A3E635) que es de SU demostración y no pinta nada en una
   web de Jaitek. Los colores de abajo están sacados del logotipo, contando píxeles: el azul del
   círculo de la «e» es #007CC3 (3.218 px, el color dominante), el naranja del círculo pequeño es
   #E77817 y el amarillo #FFFA88.

   No se usa el azul exacto para TODO, y el motivo es de contraste, no de gusto: #007CC3 sobre el
   fondo oscuro de la web da 4,34:1 y sobre el claro 4,37:1, justo por debajo del 4,5:1 que pide la
   WCAG para texto normal. Un enlace que no se lee bien no es un detalle estético. Así que:

     · en el tema OSCURO manda un azul aclarado del mismo tono (#4FA9E0, 7,5:1)
     · en el tema CLARO manda el azul exacto de la marca para los rellenos -donde el texto que va
       encima es blanco- y uno un punto más oscuro para los enlaces (#0069A8, 5,7:1)

   El amarillo #FFFA88 no entra como color de interfaz: sobre fondo claro da 1,06:1, es decir, es
   invisible. Se queda donde funciona, que es dentro del logotipo.

   Todos los valores de abajo están medidos, no elegidos a ojo.

   ⚠ OJO CON LOS SELECTORES. La plantilla no distingue el tema por `data-theme` -que también lo
   pone- sino por la CLASE `t4-dark` en el <html>, y define sus colores oscuros en darkmode.css,
   que se carga DESPUÉS de esta hoja. Escribí primero `:root[data-theme="dark"]`, que tiene menos
   peso que su `html.t4-dark[data-style="terminal"]`, y no cambió absolutamente nada: la web seguía
   verde. Hacen falta selectores con MÁS peso que los suyos, no con el mismo. */

html:root.t4-dark,
html:root.t4-dark[data-style] {
  --primary:              #4FA9E0;
  --color-primary:        #4FA9E0;
  --t4-primary:           #4FA9E0;
  --chrome-primary:       #4FA9E0;
  --logo:                 #4FA9E0;
  --primary-hover:        #6FBCEC;
  --chrome-primary-hover: #6FBCEC;
  /* La tinta que va ENCIMA de un relleno azul: casi negra, 7,3:1 sobre el azul. */
  --primary-ink:          #06121B;
  --chrome-primary-ink:   #06121B;
  --body-link-color:       #6FBCEC;
  --t4-link-color:         #6FBCEC;
  --body-link-hover-color: #8ECBF2;
  --t4-link-hover-color:   #8ECBF2;
  /* El naranja de la marca, para lo que tenga que destacar sobre el azul. */
  --accent:           #E77817;
  --color-secondary:  #E77817;
}

html:root:not(.t4-dark) {
  --primary:              #007CC3;
  --color-primary:        #007CC3;
  --t4-primary:           #007CC3;
  --chrome-primary:       #007CC3;
  --logo:                 #007CC3;
  --primary-hover:        #0069A8;
  --chrome-primary-hover: #0069A8;
  --primary-ink:          #FFFFFF;
  --chrome-primary-ink:   #FFFFFF;
  --body-link-color:       #0069A8;
  --t4-link-color:         #0069A8;
  --body-link-hover-color: #005B92;
  --t4-link-hover-color:   #005B92;
  --accent:           #A8560F;
  --color-secondary:  #A8560F;
}

/* --- Los botones, con la tinta que toca ------------------------------------------------------
   El fondo del botón ya salía azul, pero el texto seguía en BLANCO, que sobre el azul claro del
   tema oscuro da 2,6:1: ilegible. La plantilla define `--primary-ink` justo para esto -la tinta
   que va encima de un relleno de color- y los botones de Bootstrap no lo miraban. Con la tinta
   correcta son 7,3:1 en oscuro y 4,5:1 en claro. */
.btn-primary,
.hx-prose .btn-primary {
  --t4-btn-color:               var(--primary-ink);
  --t4-btn-bg:                  var(--primary);
  --t4-btn-border-color:        var(--primary);
  --t4-btn-hover-color:         var(--primary-ink);
  --t4-btn-hover-bg:            var(--primary-hover);
  --t4-btn-hover-border-color:  var(--primary-hover);
  --t4-btn-active-color:        var(--primary-ink);
  --t4-btn-active-bg:           var(--primary-hover);
  --t4-btn-active-border-color: var(--primary-hover);
  /* Y explícito además de por variable: hay una regla de la plantilla que fija el color a mano. */
  color: var(--primary-ink);
}

/* El intercambio del logotipo de Jornally sí va por `data-theme`, que la plantilla también escribe
   y que ahí no compite con nadie. */

/* ==============================================================================================
   ESTILOS HEREDADOS DE LA WEB ANTIGUA
   ==============================================================================================
   La web anterior usaba una plantilla de GavickPro, y su contenido está SEMBRADO de las clases de
   esa plantilla: `numblocks`, `gkTips1`, `gkInfo1`, `demo-typoDiv`, `gkBullet1..4`… 377 usos de
   `numblocks` en 51 artículos, 68 de `typoDesc` en 20. Al migrar, el HTML viajó y el CSS que lo
   hacía significar algo se quedó atrás: los recuadros se volvieron párrafos sueltos y los bloques
   numerados perdieron su número.

   Se revive aquí, en una sola hoja, en vez de reescribir cincuenta artículos a mano. Además de ser
   menos trabajo es menos arriesgado: no se toca ni una palabra del contenido, y si mañana aparece
   otro artículo con estas clases -quedan 19 sin publicar- se pinta bien solo.
   ---------------------------------------------------------------------------------------------- */

/* --- Bloques numerados (01, 02, 03…) ---------------------------------------------------------
   `<p class="numblocks num-1"><span>01</span> texto…</p>`. El número va en su cuadro a la
   izquierda y el texto al lado, sin que la segunda línea se meta debajo del número. */
.hx-prose .numblocks {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  margin: 0 0 1rem;
}
.hx-prose .numblocks > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 .4rem;
  border: 1px solid var(--border, rgb(255 255 255 / .18));
  border-radius: 8px;
  background: rgb(255 255 255 / .04);
  color: var(--primary, #4FA9E0);
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
}

/* --- Recuadros de texto -----------------------------------------------------------------------
   `gkInfo1` era el recuadro informativo y `gkTips1` el consejo destacado. En la web antigua el
   segundo llevaba un icono de bombilla a la izquierda; se conserva la idea con el filete de color,
   que es lo que hace que el ojo lo lea como «esto va aparte». */
.hx-prose .gkInfo1,
.hx-prose .gkTips1,
.hx-prose .typoDesc {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: rgb(255 255 255 / .04);
  border-left: 3px solid var(--border, rgb(255 255 255 / .2));
}
.hx-prose .gkTips1 { border-left-color: var(--primary, #4FA9E0); }
/* Cuando el recuadro envuelve a otro -`<div class="typoDesc"><p class="gkInfo1">`- no se pintan
   dos cajas, una dentro de otra: manda la de fuera. */
.hx-prose .typoDesc > .gkInfo1,
.hx-prose .typoDesc > .gkTips1 {
  padding: 0;
  background: none;
  border-left: 0;
}
.hx-prose .typoDesc > *:last-child { margin-bottom: 0; }
/* `demo-typo_padd` solo era una sangría; con el recuadro ya no hace falta que sea grande. */
.hx-prose .demo-typo_padd { padding-left: 0; }
/* `demo-typo` eran los encabezados que iban dentro de esos recuadros. */
.hx-prose h4.demo-typo { margin: 0 0 .5rem; font-size: 1.05em; }

/* --- Listas con viñeta de la plantilla antigua ------------------------------------------------ */
.hx-prose .gkBullet1,
.hx-prose .gkBullet2,
.hx-prose .gkBullet3,
.hx-prose .gkBullet4 { padding-left: 1.2rem; }

/* --- Iconos de Font Awesome 3 ------------------------------------------------------------------
   El contenido trae `class="icon-cogs"`, que era la sintaxis de Font Awesome 3. La plantilla carga
   Font Awesome 5, donde eso ya no existe y el icono simplemente no aparece: es el «falta algún
   icono» de eLearning y Formación. Se mapean los TRES que se usan en páginas de verdad -el resto
   solo salen en el artículo de ejemplo de la plantilla- a su glifo actual. */
.hx-prose [class*="icon-cogs"]::before,
.hx-prose [class*="icon-beaker"]::before,
.hx-prose [class*="icon-briefcase"]::before,
.hx-prose [class*="icon-group"]::before,
.hx-prose [class*="icon-pushpin"]::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: .5rem;
  color: var(--primary, #4FA9E0);
}
/* Son solo CINCO en todo el contenido publicado -las doscientas que salen en el inventario están
   en el artículo de ejemplo de la plantilla, que no es una página de la web-. Se mapea cada una a
   su equivalente de hoy: beaker pasó a llamarse flask, group a users y pushpin a thumbtack.

   ⚠ La barra va DOBLADA. Esto es un heredoc de PHP, donde \f es el escape de «salto de página»:
   escrito con una sola barra, PHP no deja «\f085» en el fichero, deja un carácter de control 0x0C
   seguido de «085». Y un carácter de control dentro de una cadena CSS no es un aviso ni un error
   visible: el navegador DEJA DE LEER la hoja a partir de ahí y se pierden todas las reglas que
   vengan después. Aquí se perdieron treinta -la rejilla del equipo, los dos tics, los ajustes del
   móvil- y desde fuera solo se veía que «unas cosas se aplican y otras no». */
.hx-prose [class*="icon-cogs"]::before      { content: "\f085"; }  /* engranajes */
.hx-prose [class*="icon-beaker"]::before    { content: "\f0c3"; }  /* matraz     */
.hx-prose [class*="icon-briefcase"]::before { content: "\f0b1"; }  /* maletín    */
.hx-prose [class*="icon-group"]::before     { content: "\f0c0"; }  /* personas   */
.hx-prose [class*="icon-pushpin"]::before   { content: "\f08d"; }  /* chincheta  */

/* --- Dos tics verdes en el mismo sitio --------------------------------------------------------
   La plantilla pinta un tic delante de CADA elemento de lista. Cuando un `<li>` no tiene texto
   propio y solo contiene otra lista dentro -que es como el editor de la web antigua dejó dos
   puntos del artículo de Moodle-, salía un tic suelto encima del tic del primer elemento de
   dentro. `:has()` permite reconocer exactamente ese caso: lista que solo envuelve a otra. */
.hx-article .hx-prose li:has(> ul):not(:has(> :not(ul)))::before { content: none !important; }
.hx-article .hx-prose li:has(> ul) > ul { margin-top: 0; }

/* --- «Artículos relacionados», fuera de todo el sitio -----------------------------------------
   La plantilla cuelga al pie de cada artículo una tira de «relacionados» que busca parientes en la
   misma categoría. En un blog orienta; en una web corporativa de veinticinco páginas lleva a otra
   página cualquiera de la misma sección, con su fecha de 2016 al lado, y lo único que consigue es
   sacar al visitante de donde acababa de llegar. */
.hx-related { display: none !important; }

/* --- Logotipo de Jornally según el tema -------------------------------------------------------
   Dos versiones del mismo lockup: la normal es azul marino sobre claro, la negativa es blanca
   sobre oscuro. El sitio arranca en oscuro pero tiene interruptor, así que se cambian solas. */
.jtk-logo-jornally { max-width: 260px; height: auto; margin: .5rem 0 1rem; }
.jtk-solo-oscuro { display: none; }
:root[data-theme="dark"] .jtk-solo-claro  { display: none; }
:root[data-theme="dark"] .jtk-solo-oscuro { display: inline-block; }

/* --- Redes sociales del pie, en una fila de iconos --------------------------------------------
   Eran cinco nombres en una lista vertical, uno debajo de otro, ocupando un bloque entero del pie
   para decir cinco palabras. Como iconos en una sola fila ocupan una línea y se reconocen antes de
   leerlos. Cada enlace lleva su nombre en `aria-label`, que es lo que oye quien no ve el icono. */
.jtk-redes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jtk-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  border: 1px solid var(--border, rgb(255 255 255 / .16));
  font-family: "Font Awesome 5 Brands";
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.jtk-redes a:hover,
.jtk-redes a:focus-visible {
  background: rgb(255 255 255 / .08);
  border-color: var(--primary, #4FA9E0);
}

/* --- Aviso de cookies -------------------------------------------------------------------------
   Barra fija abajo. Los dos botones son IGUALES a propósito -mismo tamaño, mismo peso, mismo
   color-: la AEPD exige que rechazar cueste lo mismo que aceptar, y los avisos donde «Aceptar» es
   un botón de color y «Rechazar» un enlace gris son justo los que acaban en sanción. */
.jtk-cookies {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border, rgb(255 255 255 / .18));
  border-radius: 12px;
  background: var(--surface, #121614);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / .55);
}
.jtk-cookies__t { flex: 1 1 22rem; margin: 0; font-size: .95rem; line-height: 1.5; }
.jtk-cookies__b { display: flex; gap: .6rem; flex: 0 0 auto; }
.jtk-cookies__b button {
  padding: .55rem 1.25rem;
  border: 1px solid var(--primary, #4FA9E0);
  border-radius: 8px;
  background: var(--primary, #4FA9E0);
  color: var(--primary-ink, #06121B);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jtk-cookies__b button:hover,
.jtk-cookies__b button:focus-visible {
  background: var(--primary-hover, #6FBCEC);
  border-color: var(--primary-hover, #6FBCEC);
}
@media (max-width: 575.98px) {
  /* En un móvil los botones ocupan la mitad cada uno, para que no haya que apuntar. */
  .jtk-cookies { left: .5rem; right: .5rem; bottom: .5rem; padding: .9rem 1rem; }
  .jtk-cookies__b { width: 100%; }
  .jtk-cookies__b button { flex: 1; }
}

/* --- Tarjetas de apartado de las páginas de sección -------------------------------------------
   Las monta infra/estatico/secciones-jaitek.php leyendo el propio menú, para que Empresa,
   Servicios e I+D+i dejen de ser un listado de artículos por fecha y enseñen de qué se componen. */
.jtk-apartados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin: 1.75rem 0;
}
.jtk-apartado {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border, rgb(255 255 255 / .14));
  border-radius: 10px;
  background: rgb(128 128 128 / .05);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.jtk-apartado:hover,
.jtk-apartado:focus-visible {
  border-color: var(--primary, #4FA9E0);
  transform: translateY(-2px);
  text-decoration: none;
}
.jtk-apartado__t {
  font-weight: 600;
  color: var(--heading, inherit);
}
/* La flecha se pone por CSS y no en el texto: es decoración, y un lector de pantalla no tiene por
   qué leer «flecha» al final de cada enlace. */
.jtk-apartado__t::after { content: " →"; color: var(--primary, #4FA9E0); }
.jtk-apartado__d {
  font-size: .92em;
  line-height: 1.45;
  color: var(--text, inherit);
  opacity: .85;
}

/* --- Retrato del equipo ----------------------------------------------------------------------- */
.jtk-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
  margin: 1.75rem 0;
}
.jtk-equipo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ==============================================================================================
   MÓVIL
   ============================================================================================== */

/* --- El texto se quedaba en 303 px de 375 -----------------------------------------------------
   Dos rellenos laterales se sumaban: `.t4-col` 16 px y `.hx-pad` 20 px. Son 36 px por lado, y el
   texto se partía cada 41 caracteres -por debajo de los 45-75 en los que se lee de corrido-.
   Amontonar rellenos así es lo que pasa cuando una rejilla de Bootstrap vive dentro de la rejilla
   propia de la plantilla: cada una pone el suyo sin saber de la otra. Se bajan los dos a 8 px, que
   dejan un margen real de 16 y el texto en unos 343 px (47 caracteres).

   ⚠ El relleno de `.t4-section-inner.container` NO se toca, aunque parezca que también sobra. Es
   la trampa clásica de Bootstrap: la `.row` que va dentro lleva un margen NEGATIVO de 16 px que
   ese relleno compensa. Al quitarlo -que fue lo primero que hice- el margen negativo queda al aire
   y la cabecera del artículo se salía 16 px por la izquierda de la pantalla, con el párrafo a 4 px
   de un borde y a 27 del otro. Los tres valores se miden juntos o no se entiende ninguno. */
@media (max-width: 767.98px) {
  .t4-main-body .t4-col {
    padding-left: 8px;
    padding-right: 8px;
  }
  .t4-main-body .hx-container.hx-pad {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* --- En el móvil, h2 y h3 eran el MISMO tamaño ---------------------------------------------
     La plantilla los iguala a 22 px por debajo de 768 px, así que en la portada «Qué hacemos» (h2)
     y «Aplicaciones web a medida» (h3) se veían igual y la jerarquía desaparecía justo donde más
     falta hace, que es cuando solo caben tres palabras por línea. El !important no es capricho:
     la regla de la plantilla lo lleva. */
  .hx-article .hx-prose h2,
  .hx-article .hx-prose .h2 { font-size: 25px !important; }
  .hx-article .hx-prose h3,
  .hx-article .hx-prose .h3 { font-size: 19px !important; }

  /* --- La rejilla de clientes, de dos columnas a tres ---------------------------------------
     Con el mínimo de 120 px solo cabían dos, y 46 logotipos en dos columnas son veintitrés filas:
     unos 3.700 px de dedo. Con tres caben en dieciséis filas y se sigue reconociendo cada marca. */
  .jtk-clientes { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .jtk-cliente { padding: .45rem; border-radius: 8px; }

  .jtk-opinion blockquote { font-size: 16px !important; }
}

/* --- Opiniones de clientes -------------------------------------------------------------------
   Las citas venían de la web antigua con el marcado de SU plantilla (clases `gkInfo1`, de
   GavickPro), que aquí no significa nada: se pintaban como texto corriente. El rastro típico de una
   migración, el HTML viaja y el CSS que lo hacía significar algo se queda atrás.

   ⚠ Aquí NO se estiliza el `blockquote`. La plantilla ya lo hace -filete de 3 px en el color
   principal, Space Grotesk 600, 20 px que bajan a 18 en móvil- y lo hace con `!important` en TODAS
   las propiedades, así que cualquier regla propia es papel mojado por muy específica que sea.
   Intenté encajar la cita en una caja mía con su borde y su relleno y el resultado en el móvil eran
   DOS filetes verdes y dos sangrías: de los 303 px de columna, 76 se iban en adornos y el texto se
   quedaba en 227, partiéndose cada cuatro palabras.

   Así que la caja desaparece y manda el filete de la plantilla, que era justo el aspecto que hacía
   falta. Aquí solo queda separar un testimonio de otro y alinear la firma bajo la cita. */
.jtk-opiniones { margin: 1.75rem 0; }
.jtk-opinion { margin: 0 0 2rem; padding: 0; border: 0; background: none; }
/* Lo ÚNICO que se le discute a la plantilla, y con motivo: su blockquote está pensado para una
   frase entresacada -20 px, seminegrita, para que salte a la vista-, y aquí lo que hay son
   testimonios de sesenta palabras. A ese tamaño uno solo ocupa trece líneas en un móvil y el
   conjunto se vuelve ilegible de puro grande. Se baja a tamaño de lectura. Lleva !important
   porque la regla de la plantilla lo lleva en todas sus propiedades. */
.jtk-opinion blockquote {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}
/* 25 px = los 22 de sangría del blockquote de la plantilla más sus 3 de filete. La firma cae
   exactamente bajo la primera letra de la cita, que es lo que hace que se lean como una unidad. */
.jtk-opinion figcaption {
  margin-top: .6rem;
  padding: 0 0 0 25px;
  font-size: .92em;
  background: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  color: inherit;
}
/* Cada dato en su línea: organización arriba, quién firma debajo. En <span> con display block y no
   en <p> para que sigan dentro del <figcaption>, que es lo que ata la cita con su autoría de cara a
   un lector de pantalla. */
.jtk-opinion__org,
.jtk-opinion__firma { display: block; }
.jtk-opinion__org { font-weight: 600; }
.jtk-opinion__firma { opacity: .75; }

/* (Los «artículos relacionados» se apagan más arriba, para TODO el sitio.) */

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PORTADA · baldosas de icono
   Añadido el 25 de septiembre de 2026.

   Copia el lenguaje visual de la web de producción, que es el que gusta: cuadrados grandes con un
   icono blanco centrado, alternando azul y negro, y el nombre debajo sobre blanco.

   ⚠ El color NO es lo único que distingue una baldosa de otra: cada una lleva su icono y su
   etiqueta. Alternar azul y negro es ritmo visual, no información.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.jtk-baldosas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2rem 0 1rem;
}
@media (min-width: 992px) { .jtk-baldosas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.jtk-baldosa {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.jtk-baldosa:hover, .jtk-baldosa:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    text-decoration: none;
}
/* Quien pide menos movimiento no lo recibe: para algunas personas una animación de más marea. */
@media (prefers-reduced-motion: reduce) { .jtk-baldosa, .jtk-baldosa:hover { transition: none; transform: none; } }

.jtk-baldosa__icono {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(2.5rem, 7vw, 4rem);
}
.jtk-baldosa--azul  .jtk-baldosa__icono { background: #4a9ade; }
.jtk-baldosa--negro .jtk-baldosa__icono { background: #1a1a1a; }

.jtk-baldosa__pie {
    background: #fff;
    padding: .9rem .75rem 1rem;
    text-align: center;
}
.jtk-baldosa__titulo {
    display: block;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
    color: #1a1a1a;
}
.jtk-baldosa__texto { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.4; color: #5a5a5a; }

/* En oscuro el pie blanco daría un fogonazo en mitad de la página. */
html:root.t4-dark .jtk-baldosa__pie { background: #222; }
html:root.t4-dark .jtk-baldosa__titulo { color: #f2f2f2; }
html:root.t4-dark .jtk-baldosa__texto { color: #b8b8b8; }

/* Banda ancha de sección, como la de «Puedes confiar en nosotros» de producción. */
.jtk-banda { text-align: center; padding: 3rem 1rem; margin: 2.5rem 0; background: #f4f6f8; border-radius: .5rem; }
html:root.t4-dark .jtk-banda { background: #1e1e1e; }
.jtk-banda h2 { text-transform: uppercase; letter-spacing: .02em; }
.jtk-banda p { max-width: 46rem; margin-inline: auto; }
.jtk-banda .btn { margin: .35rem .25rem 0; }

.jtk-portada-foto img { width: 100%; height: auto; border-radius: .5rem; }

/* ⚠ Corrección del 25 sep: los títulos se cortaban («APLICACIONE», «INVESTIGACIO»).
   Causa: mayúsculas + espaciado entre letras hacen una palabra más ancha que su columna, y el
   `overflow: hidden` de la baldosa -que está para redondear la esquina del icono- se la comía sin
   dejar que envolviera. Se le deja envolver y se ajusta el tamaño al ancho disponible. */
.jtk-baldosa__titulo {
    font-size: clamp(.7rem, 2.4vw, .82rem);
    letter-spacing: .02em;
    overflow-wrap: break-word;
    hyphens: auto;
}
.jtk-baldosa__texto { overflow-wrap: break-word; }

/* Ajuste del 25 sep, tras mirarlo en móvil y en escritorio:
   - En pantalla muy estrecha las baldosas van a UNA columna. A dos, cada una queda tan angosta que
     «APLICACIONES» hay que partirlo con guion, y un título en mayúsculas partido se lee mal.
   - El texto descriptivo NO se parte a mitad de palabra: «actualizacion es incluidas» era peor que
     una línea desigual. */
.jtk-baldosas { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .jtk-baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .jtk-baldosas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.jtk-baldosa__texto { overflow-wrap: normal; }

/* A una sola columna, un cuadrado perfecto ocuparía toda la pantalla de alto: se rebaja. */
@media (max-width: 575.98px) { .jtk-baldosa__icono { aspect-ratio: 5 / 2; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   BOTONES DENTRO DEL TEXTO · corrección del 25 de septiembre de 2026
   ══════════════════════════════════════════════════════════════════════════════════════════════

   La plantilla subraya los enlaces del cuerpo con un borde inferior, y para que los BOTONES no
   salgan subrayados hace esto en su `template.css`:

       .hx-prose a.btn, .hx-prose a[class*="btn-"] { border-bottom-width: 0; }

   El problema es que un botón no tiene «subrayado»: tiene BORDE. Al poner el inferior a cero les
   quita su propio lado de abajo, y quedan cajas abiertas: línea arriba y a los lados, nada debajo.
   Y en los rellenos el color de ese lado además es blanco, así que al restaurar el ancho sin tocar
   el color saldría una raya blanca.

   ⚠ Pasa en TODOS los botones de TODOS los artículos, no solo en la portada.

   Se restauran los tres valores desde las propias variables de Bootstrap, para que cada variante
   -relleno, contorno, peligro…- recupere el color que le toca sin escribir ninguno a mano.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.hx-prose a.btn,
.hx-prose a[class*="btn-"],
.hx-prose .blog-list .item-readmore a,
.blog-list .item-readmore .hx-prose a {
    border-bottom-style: solid;
    border-bottom-width: var(--t4-btn-border-width, 1px);
    /* El color base que la propia plantilla da a cualquier botón. */
    border-bottom-color: var(--t4-btn-border-color, transparent);
}

/* Las variantes con color propio. Se usan LAS VARIABLES DE LA PLANTILLA y no un azul escrito a
   mano: el día que alguien cambie el color de marca, estos bordes lo siguen solos. */
.hx-prose a.btn-primary,
.hx-prose a.btn-outline-primary { border-bottom-color: var(--color-primary); }

.hx-prose a.btn-secondary,
.hx-prose a.btn-outline-secondary { border-bottom-color: var(--color-secondary, var(--t4-btn-border-color)); }

.hx-prose a.btn-danger,
.hx-prose a.btn-outline-danger { border-bottom-color: var(--color-danger, var(--t4-btn-border-color)); }

.hx-prose a.btn:hover,
.hx-prose a[class*="btn-"]:hover,
.hx-prose a.btn:focus-visible,
.hx-prose a[class*="btn-"]:focus-visible {
    border-bottom-color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SECCIONES DE UNA PÁGINA LARGA · 25 de septiembre de 2026

   Al agrupar seis apartados en una sola página había que hacer algo que antes hacía el menú:
   **decirle a la persona dónde está**. Sin eso, «menos clics» se convierte en diez mil caracteres
   seguidos sin puntos de descanso, que es peor que los clics.

   Tres piezas:
     · el índice de arriba, como fichas y no como lista de viñetas;
     · cada sección numerada, con una línea de separación y una barra de color en su título;
     · aire suficiente entre una y la siguiente para que se lean como bloques y no como párrafos.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ---- El índice ------------------------------------------------------------------------------ */
.indice-seccion { margin: 1.75rem 0 2.5rem; }
.indice-seccion ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.indice-seccion a {
    display: inline-block;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    transition: background-color .15s ease, color .15s ease;
}
.indice-seccion a:hover,
.indice-seccion a:focus-visible {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .indice-seccion a { transition: none; } }

/* ---- Cada sección --------------------------------------------------------------------------- */
.hx-prose .bloque-seccion {
    counter-increment: seccion;
    padding-top: 2.5rem;
    margin-top: 3rem;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    /* ⚠ Sin esto, al pulsar una ficha del índice el título queda TAPADO por la cabecera fija y
       parece que el enlace no ha ido a ninguna parte. */
    scroll-margin-top: 6rem;
}
.hx-prose .bloque-seccion:first-of-type { margin-top: 1rem; border-top: 0; padding-top: 0; }

/* El número. Es lo que convierte «otro título más» en «vas por la tercera de seis». */
.hx-prose .bloque-seccion > h2 {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
}
.hx-prose .bloque-seccion > h2::before {
    content: counter(seccion, decimal-leading-zero);
    flex: none;
    font-size: .8em;
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.hx-prose { counter-reset: seccion; }

/* Los subtítulos, más discretos que el título de sección: si pesan lo mismo, no hay jerarquía. */
.hx-prose .bloque-seccion h3 {
    margin-top: 2rem;
    margin-bottom: .6rem;
    font-size: 1.12rem;
    padding-left: .7rem;
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.hx-prose .bloque-seccion h4 { margin-top: 1.5rem; font-size: 1rem; }

.hx-prose .bloque-seccion ul { margin-bottom: 1.25rem; }
.hx-prose .bloque-seccion li { margin-bottom: .5rem; }

/* ---- «Más sobre X» -------------------------------------------------------------------------- */
.hx-prose .jtk-mas { margin: .35rem 0 1.5rem; }
.hx-prose .jtk-mas a {
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}
.hx-prose .jtk-mas a::after { content: " →"; }
.hx-prose .jtk-mas a:hover { text-decoration: underline; }

/* ⚠ Otra vez la regla de la plantilla que subraya los enlaces del cuerpo con un borde inferior:
   las fichas del índice son enlaces, así que su lado de abajo salía de otro color y la píldora
   quedaba con una raya rara. Mismo caso que los botones, y no se arregla solo porque aquel se
   arreglara: aquella regla apunta a `.btn`, y esto no es un botón. */
.hx-prose .indice-seccion a {
    border-bottom-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.hx-prose .indice-seccion a:hover,
.hx-prose .indice-seccion a:focus-visible { border-bottom-color: var(--color-primary); }

/* ---- El índice no es una lista de ventajas --------------------------------------------------
   La hoja del tema (single-article.css) le pinta un ✓ a TODO `ul > li` del cuerpo del artículo y
   le reserva 28 px por la izquierda. Dentro del índice eso sale como un visto delante de cada
   ficha, que ahí no significa nada. `list-style: none` no lo quita porque no es un marcador de
   lista, es un pseudo-elemento: hay que apagarlo con la misma especificidad que el tema.       */
.hx-article .hx-prose .indice-seccion ul > li {
    padding-left: 0;
    /* El tema estira cada elemento de la lista a la línea completa; aquí cada ficha ocupa lo suyo. */
    flex: 0 0 auto;
    width: auto;
}
.hx-article .hx-prose .indice-seccion ul > li::before {
    display: none;
    content: none;
}

/* El tema declara las listas del artículo en columna (una ventaja por línea). El índice es lo
   contrario: fichas en fila que envuelven. Hace falta la especificidad del tema para ganarle.  */
.hx-article .hx-prose .indice-seccion ul {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   I+D+i · fichas de proyecto
   ══════════════════════════════════════════════════════════════════════════════════════════════

   La página se pinta desde la DESCRIPCIÓN de la categoría 13, no desde el listado de artículos:
   así desaparecen la autoría y la fecha, que en un proyecto europeo no dicen nada, y se puede
   separar «recientes» de «anteriores». La plantilla mete esa descripción en la cabecera del blog,
   pensada para una entradilla corta, y la estrecha a 560 px. Aquí hay 21 fichas, así que en ESTA
   página (body.item-107) se le devuelve el ancho y solo la entradilla se queda estrecha.        */

body.item-107 .hx-blogmast__desc {
    max-width: none;
    text-align: start;
}
body.item-107 .jtk-idi-entradilla {
    max-width: 44rem;
    margin: 0 auto 1rem;
    text-align: center;
}

/* Restos del armazón de blog que aquí no significan nada: el antetítulo «ARTÍCULOS» y una barra
   de temas con un único chip que enlaza a la propia página.                                     */
body.item-107 .hx-blogmast .hx-eyebrow,
body.item-107 .hx-blogtopics { display: none; }

.jtk-idi-titulo {
    margin: 3.25rem 0 .25rem;
    text-align: center;
}
.jtk-idi-titulo + .jtk-proyectos { margin-top: 1.5rem; }

.jtk-proyectos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0 1rem;
}
@media (min-width: 576px) { .jtk-proyectos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .jtk-proyectos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Los anteriores son 16: caben más por fila sin que la página se haga interminable. */
@media (min-width: 992px) { .jtk-proyectos-compacto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.jtk-proyecto {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
    transition: transform .18s ease, box-shadow .18s ease;
}
.jtk-proyecto:hover, .jtk-proyecto:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
@media (prefers-reduced-motion: reduce) {
    .jtk-proyecto, .jtk-proyecto:hover { transition: none; transform: none; }
}

/* Caja de proporción fija: los logos vienen con formas muy distintas (uno es casi cuadrado) y sin
   una caja común las fichas quedan a distinta altura. `contain` los mete enteros, sin recortar ni
   deformar, y el fondo blanco salva a los que tienen el fondo transparente.                      */
.jtk-proyecto-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2 / 1;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.jtk-proyecto-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.jtk-proyecto-nombre {
    margin: 1rem 1.15rem 0;
    font-size: 1.05rem;
    line-height: 1.25;
}
.jtk-proyecto-nombre a { text-decoration: none; }

.jtk-proyecto-meta {
    margin: .3rem 1.15rem 0;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 55%, transparent);
}
.jtk-proyecto-texto {
    margin: .6rem 1.15rem 1.25rem;
    font-size: .92rem;
    line-height: 1.5;
}

/* En modo oscuro la caja del logo se queda BLANCA a propósito: los logos están hechos para fondo
   claro y sobre negro varios desaparecen. Lo que se adapta es la ficha que los rodea.
   ⚠ Va por la clase `t4-dark`, no por `data-theme`: ver el aviso del principio de esta hoja.     */
html:root.t4-dark .jtk-proyecto {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, .12);
}
html:root.t4-dark .jtk-proyecto-texto { color: #c4c4c4; }
html:root.t4-dark .jtk-proyecto-meta  { color: #9a9a9a; }

/* ---- I+D+i · ganarle a page-107.css --------------------------------------------------------
   Esa hoja es una capa «pixel-perfect» GENERADA para la página de blog de demostración de la
   plantilla (era page-221.css), se carga DESPUÉS de esta y trae `!important`. Como I+D+i ya no
   es un listado de artículos, aquí se deshacen las dos cosas suyas que estorban: el ancho de 560
   px pensado para una entradilla corta, y la píldora «ARTÍCULOS» sobre el título. No se edita
   page-107.css porque su propia cabecera avisa de que la regenera un guion.                     */
html body.item-107 .hx-blogmast__desc {
    max-width: none;
    width: 100%;
}
html body.item-107 .hx-blogmast .hx-eyebrow { display: none !important; }

/* La caja del logo se fija en ALTO, no en proporción: con `aspect-ratio` un logo más alto que
   ancho (coACTION es casi cuadrado) empujaba su propia caja y esa ficha quedaba descuadrada
   respecto a las demás.                                                                        */
.jtk-proyecto-logo {
    aspect-ratio: auto;
    height: 7.5rem;
    min-height: 0;
    overflow: hidden;
}
.jtk-proyecto-logo img { max-height: 100%; max-width: 100%; }

/* La cabecera del blog deja los párrafos sin margen (allí solo hay uno). Aquí son dos y se leían
   pegados, como si fueran el mismo. */
html body.item-107 .jtk-idi-entradilla p + p { margin-top: .9rem; }

/* ---- Las fichas de proyecto, en el idioma que sea --------------------------------------------
   Las reglas de arriba se ataron a `body.item-107`, que es la página ESPAÑOLA de I+D+i, y cuando
   apareció la inglesa salió a medias: entradilla y fichas encajadas en 640 px, con el antetítulo
   «BLOG» encima. Estas van por el CONTENIDO -cualquier cabecera que lleve nuestras fichas- así que
   valen para las dos y para la siguiente que haya. Las de `item-107` se quedan porque allí hay que
   ganarle además a page-107.css, que se carga después y trae `!important`.                       */
html .hx-blogmast__desc:has(.jtk-proyectos) {
    max-width: none;
    width: 100%;
    text-align: start;
}
html .hx-blogmast:has(.jtk-proyectos) .hx-eyebrow { display: none !important; }
html body:has(.jtk-proyectos) .hx-blogtopics { display: none; }

html .jtk-idi-entradilla {
    max-width: 44rem;
    margin: 0 auto 1rem;
    text-align: center;
}
html .jtk-idi-entradilla p + p { margin-top: .9rem; }

/* ---- Donde acaba la cuadrícula del fondo -----------------------------------------------------
   La cuadrícula es el fondo de la CABECERA del blog, y como esta página entera vive dentro de esa
   cabecera -es la descripción de la categoría- se extendía hasta el último proyecto. Termina donde
   empieza el listado: la entradilla se queda sobre la cuadrícula y las fichas, sobre el fondo liso
   de la página. Con el fondo liso, además, el borde de cada ficha pasa a ser lo que las delimita,
   así que se marca un poco más.

   El corte es a todo lo ancho (`100vw`), y por eso la cabecera lleva `overflow-x: clip`: sin él,
   los píxeles de la barra de desplazamiento sobran por la derecha y aparece un scroll horizontal
   en toda la página.                                                                             */
.hx-blogmast:has(.jtk-idi-cuerpo) { overflow-x: clip; }

.jtk-idi-cuerpo {
    position: relative;
    padding-top: 3.25rem;
}
.jtk-idi-cuerpo > .jtk-idi-titulo:first-child { margin-top: 0; }
.jtk-idi-cuerpo::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    width: 100vw;
    height: 100%;
    margin-left: -50vw;
    background: var(--bg);
}
.jtk-idi-cuerpo > * { position: relative; }

/* Sobre fondo liso la ficha necesita su propia línea: antes se apoyaba en el contraste con la
   cuadrícula. */
.jtk-proyecto { border-color: rgba(16, 20, 15, .14); }
html:root.t4-dark .jtk-proyecto { border-color: rgba(255, 255, 255, .16); }

/* Una barra de «temas» con un solo chip que enlaza a la página en la que ya estás no informa de
   nada: es una fila entera de cabecera gastada en un enlace circular. Se oculta solo en ese caso;
   en cuanto haya subcategorías de verdad vuelve a aparecer sola. */
.hx-blogtopics:has(.hx-blogtopics__list li:only-child) { display: none; }

/* =================================================================================================
   Ajustes del repaso del 28 de septiembre de 2026
   ================================================================================================= */

/* ---- Fichas de proyecto de I+D+i: recuperar sus márgenes interiores -----------------------------
   ⚠ **El triple selector NO es un descuido: es lo que hace falta para ganar.** `page-107.css` -la
   hoja por página del menú de I+D+i, que REGENERA `afinar-jaitek.php` y no se edita a mano- trae
   `body.item-107 .hx-blogmast__desc p { margin: 0 }` para la entradilla del blog. Las fichas de
   proyecto viven dentro de ese mismo contenedor, así que esa regla les quitaba los márgenes a sus
   párrafos y el texto quedaba pegado al borde de la caja.
   Especificidad: aquella suma (0,2,2) y `.jtk-proyecto-texto` a secas (0,1,0), así que perdía. Con
   el contenedor delante suma (0,3,0) y gana. Si alguien acorta esto, el texto vuelve a pegarse. */
.jtk-proyectos .jtk-proyecto .jtk-proyecto-nombre { margin: 1rem 1.15rem 0; }
.jtk-proyectos .jtk-proyecto .jtk-proyecto-meta   { margin: .3rem 1.15rem 0; }
.jtk-proyectos .jtk-proyecto .jtk-proyecto-texto  { margin: .6rem 1.15rem 1.25rem; }

/* ---- Pie: la columna de secciones, a la misma altura de línea que las de al lado ----------------
   Esa columna es un menú de Joomla y venía con el `gap` y el relleno del `navbar-nav` de la
   plantilla: 11 px entre elementos más 4 px arriba y abajo de cada enlace. Las columnas de contacto
   y legal no llevan nada, así que la de secciones se veía suelta al lado de ellas -que es lo que
   se lee como «demasiado espacio», más que la altura en sí-. */
/* ⚠ El selector va calcado del de la plantilla y con una clase más: `template.css` trae
   `.kinetic-footer .hx-foot-col ul.nav { gap: 11px }`, que suma (0,3,1). Con menos no se gana. */
.kinetic-footer .hx-foot-col ul.nav.navbar-nav { gap: 0; }
.kinetic-footer .hx-foot-col ul.nav.navbar-nav .nav-link { padding-top: 0; padding-bottom: 0; }