/* /trabajos/ — catálogo visual (2026-10-18). Encima de editorial.css + home.css (nav, pie,
   botones .u-bt, tipografías). Marca: fondo #0B0710, lima #B6FF00, morado #9D00FF. */

.tj-hero { position: relative; padding: clamp(120px, 14vw, 180px) 0 clamp(40px, 6vw, 90px); overflow: clip; }
.tj-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(700px 480px at 78% 38%, rgba(157, 0, 255, .38), transparent 65%),
              radial-gradient(520px 380px at 12% 80%, rgba(182, 255, 0, .10), transparent 60%); }
.tj-hero__in { position: relative; display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
.tj-hero__txt { text-align: center; }
.tj-h1 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; color: #fff;
  font-size: clamp(46px, 8.4vw, 118px); line-height: .94; letter-spacing: -.01em; margin: 10px 0 0; text-align: center; }
.tj-h1 .u-se { display: block; text-transform: none; font-size: 1.04em; line-height: 1.08; padding-bottom: .06em; }
.tj-lead { color: var(--u-mu, #b9adc7); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; max-width: 56ch; margin: 22px auto 0; text-align: center; }
.tj-hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: 30px; }
.tj-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: #B6FF00; text-decoration: none; }
.tj-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tj-link--claro { color: #fff; }

.tj-collage { position: relative; height: clamp(300px, 56vw, 560px); }
.tj-col { position: absolute; width: min(78%, 620px); height: auto; border-radius: 18px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .10); will-change: transform; }
.tj-col--a { left: 50%; top: 18%; z-index: 3; translate: -50% 0; rotate: -2deg; }
.tj-col--b { left: 0; top: 0; z-index: 2; rotate: -7deg; scale: .8; opacity: .9; }
.tj-col--c { right: 0; bottom: 0; z-index: 2; rotate: 6deg; scale: .78; opacity: .9; }
.tj-chip { position: absolute; z-index: 4; padding: 12px 18px; border-radius: 999px; font: 700 14px/1 "Archivo", sans-serif; color: #fff; white-space: nowrap;
  background: rgba(22, 16, 30, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); will-change: transform; }
.tj-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #B6FF00; box-shadow: 0 0 12px #B6FF00; vertical-align: 1px; }
.tj-chip--1 { left: 4%; bottom: 14%; rotate: -4deg; }
.tj-chip--2 { right: 2%; top: 6%; rotate: 3deg; }
.tj-chip--3 { left: 30%; bottom: -2%; rotate: 2deg; }
@media (min-width: 1100px) {
  .tj-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .tj-hero__txt, .tj-hero .tj-lead { text-align: left; }
  .tj-hero .tj-lead { margin-left: 0; }
  .tj-hero__cta { justify-content: flex-start; }
}

.tj-cat-sec { padding-block: clamp(30px, 5vw, 70px) clamp(60px, 8vw, 120px); }
.tj-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); }
.tj-filtro { min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; font: 700 14px/1 "Archivo", sans-serif; letter-spacing: .02em;
  color: #fff; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .16);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.tj-filtro:hover { border-color: #B6FF00; }
.tj-filtro:active { transform: scale(.97); }
.tj-filtro.is-on { background: #B6FF00; color: #0B0710; border-color: #B6FF00; }
.tj-filtro:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.tj-grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) { .tj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tj-card--xl { grid-column: 1 / -1; } }
.tj-card { position: relative; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .10); transform-style: preserve-3d; will-change: transform;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), border-color .3s ease, box-shadow .4s ease; }
.tj-card[hidden] { display: none; }
.tj-card:hover { border-color: rgba(182, 255, 0, .35); box-shadow: 0 40px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(157, 0, 255, .18); }
.tj-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #0B0710; }
.tj-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.23, 1, .32, 1); }
.tj-card:hover .tj-media img { transform: scale(1.035); }
.tj-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(22px, 2.6vw, 34px); text-align: center; }
.tj-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border-radius: 999px; background: #B6FF00; color: #0B0710;
  font: 800 11px/1 "Archivo", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tj-tag--concepto { background: transparent; color: #e7defa; border: 1px solid rgba(255, 255, 255, .35); }
.tj-titulo { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.02; margin: 8px 0 0; text-align: center; }
.tj-card--xl .tj-titulo { font-size: clamp(32px, 4vw, 56px); }
.tj-cat { font: 700 12px/1.3 "Archivo", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #B6FF00; }
.tj-texto { color: var(--u-mu, #b9adc7); line-height: 1.6; max-width: 58ch; }
.tj-nota { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 72ch; text-align: center; font-size: 13.5px; line-height: 1.6; color: var(--u-mu, #b9adc7); }

.tj-final { padding-bottom: clamp(80px, 10vw, 140px); }
.tj-final__card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(22px, 4vw, 60px); border-radius: 32px; border: 1px solid rgba(255, 255, 255, .12);
  background: radial-gradient(600px 300px at 50% 0%, rgba(157, 0, 255, .35), transparent 70%), rgba(255, 255, 255, .03); }
.tj-h2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; color: #fff; font-size: clamp(36px, 5.6vw, 76px); line-height: .98; text-align: center; }
.tj-h2 .u-se { display: block; text-transform: none; line-height: 1.1; }

/* Aparición al hacer scroll (trabajos.js pone .tj-js y .tj-in); sin JS todo se ve. */
.tj-js .tj-up:not(.tj-in) { opacity: 0; transform: translate3d(0, 40px, 0) scale(.985); }
.tj-js .tj-up { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, box-shadow .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .tj-js .tj-up:not(.tj-in) { opacity: 1; transform: none; }
  .tj-card, .tj-media img, .tj-filtro { transition: none; }
}
/* Título: centrado en móvil (home.css trae reglas de h1 más específicas) y a la medida de la
   columna en escritorio (a 118px partía en cuatro líneas y empujaba el texto fuera de la vista). */
.u-root .tj-hero .tj-h1 { text-align: center; }
@media (min-width: 1100px) {
  .u-root .tj-hero .tj-h1 { text-align: left; font-size: clamp(50px, 5.3vw, 84px); }
  .tj-h1 .u-se { white-space: nowrap; }
  .tj-hero { padding-top: clamp(110px, 10vw, 150px); }
}