/* Trabajos (396) y sus cinco categorías (729, 883, 892, 900, 902): el portfolio, rehecho el 2026-09-25.
   La grilla, el mosaico y las ventanas están en assets/trabajos.css (los encolan los shortcodes);
   acá va lo propio de estas páginas: el motivo del hero y los accesos por rubro. */

/* ---------- Hero: luces de color detrás de las capturas que flotan ---------- */
.hero-trabajos::before {
    background:
        radial-gradient(36% 50% at 14% 20%, rgba(255, 22, 50, .46), transparent 68%),
        radial-gradient(32% 46% at 60% 90%, rgba(31, 184, 205, .40), transparent 70%),
        radial-gradient(30% 44% at 90% 14%, rgba(255, 205, 87, .36), transparent 70%),
        radial-gradient(34% 44% at 40% 10%, rgba(142, 117, 178, .40), transparent 72%);
    animation: tjh-drift 11s ease-in-out infinite alternate;
}
.hero-trabajos::after { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 22px 22px; }
@keyframes tjh-drift {
    from { transform: translate3d(-5%, -3%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.16); }
}
/* En el hero bajo de las categorías el mosaico va más tenue: ahí manda el título */
.hero-trabajos.es-bajo .tj-tesela { opacity: .2; }
@media (prefers-reduced-motion: reduce) { .hero-trabajos::before { animation: none; } }

/* ---------- Los rubros, como tarjetas enlazadas ---------- */
.tjr-grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .tjr-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tjr-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Cada tarjeta lleva un collage de tres capturas del rubro (formato="collage", en assets/trabajos.css) */
.tjr-grilla .svc-item { justify-items: center; text-align: center; padding: 22px 18px 20px; }
.tjr-grilla .svc-item h3 { font-size: 19px; }
.tjr-grilla .svc-item-mas { margin-top: 0; }

/* ---------- Los otros rubros, al pie de cada categoría (banda oscura) ---------- */
.tjr-otros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.tjr-otros a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff !important; text-decoration: none;
    padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .06); transition: background .15s, border-color .15s; }
.tjr-otros a:hover { background: var(--red); border-color: var(--red); }