/* TRABAJOS */

.active-link { opacity: .6; }

.tr-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: url("img/textil.png") center center / cover no-repeat;
}

.tr-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.66) 46%, rgba(0,0,0,.18) 100%);
}

.tr-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 110px;
}

.tr-hero-content > span,
.tr-label,
.tr-process-content > span,
.tr-cta-content > span {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.tr-hero h1 {
  max-width: 1050px;
  font-size: clamp(4.2rem, 9vw, 8.4rem);
  line-height: .86;
  letter-spacing: -.065em;
}

.tr-hero p {
  max-width: 650px;
  margin: 30px 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.65;
}

.tr-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tr-intro { padding: 110px 0; }

.tr-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 90px;
  align-items: end;
}

.tr-intro h2,
.tr-process-content h2 {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.tr-intro-copy { display: grid; gap: 18px; }

.tr-intro-copy p,
.tr-process-content > p {
  color: #6b6b72;
  font-size: 1.05rem;
  line-height: 1.7;
}

.tr-categories { background: #f5f5f2; }

.tr-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tr-category-grid article {
  min-height: 250px;
  padding: 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.tr-category-grid article > span {
  display: block;
  margin-bottom: 65px;
  color: #a0a0a5;
  font-size: .75rem;
}

.tr-category-grid h3 { margin-bottom: 10px; font-size: 1.5rem; }
.tr-category-grid p { color: #707077; line-height: 1.6; }

.tr-gallery-section { background: #fff; }

.tr-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 420px;
  gap: 14px;
}

.tr-work-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
}

.tr-work-large { grid-row: span 2; }

.tr-work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.tr-work-card:hover img { transform: scale(1.035); }

.tr-work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.85) 100%);
}

.tr-work-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px;
  color: #fff;
}

.tr-work-overlay span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.tr-work-overlay h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.02;
}

.tr-featured {
  padding: 110px 0;
  background: #0c0c0e;
  color: #fff;
}

.tr-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

.tr-featured-grid article {
  overflow: hidden;
  background: #171719;
  border-radius: 22px;
}

.tr-featured-grid img {
  width: 100%;
  aspect-ratio: 660 / 900;
  object-fit: cover;
  display: block;
}

.tr-featured-copy { padding: 28px; }

.tr-featured-copy > span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.5);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.tr-featured-copy h2,
.tr-featured-copy h3 {
  margin-bottom: 14px;
  font-size: 1.6rem;
  line-height: 1.15;
  color: #fff;
}

.tr-featured-copy p {
  color: rgba(255,255,255,.62);
  line-height: 1.65;
}

.tr-process {
  padding: 110px 0;
  background: #f5f5f2;
}

.tr-process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.tr-process-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
}

.tr-process-content > p { margin-top: 24px; }

.tr-process-list {
  margin-top: 40px;
  border-top: 1px solid #d8d8da;
}

.tr-process-list div {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid #d8d8da;
}

.tr-process-list strong { color: #99999f; }
.tr-process-list span { font-weight: 700; }

.tr-cta {
  padding: 115px 0;
  background: #151518;
  color: #fff;
  text-align: center;
}

.tr-cta-content { max-width: 980px; }

.tr-cta h2 {
  margin-bottom: 24px;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.tr-cta p {
  max-width: 650px;
  margin: 0 auto 32px;
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  line-height: 1.7;
}

.tr-cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tr-light-btn {
  background: #fff;
  color: #111;
  border-color: #fff;
}

@media (max-width: 1050px) {
  .tr-category-grid,
  .tr-featured-grid { grid-template-columns: repeat(2, 1fr); }

  .tr-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .tr-intro-grid,
  .tr-process-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 640px) {
  .tr-hero { min-height: 86vh; }
  .tr-hero-overlay { background: rgba(0,0,0,.68); }

  .tr-intro,
  .tr-featured,
  .tr-process,
  .tr-cta { padding: 75px 0; }

  .tr-category-grid,
  .tr-featured-grid,
  .tr-gallery { grid-template-columns: 1fr; }

  .tr-gallery { grid-auto-rows: 520px; }
  .tr-work-large { grid-row: span 1; }
}