.trx-mosaic { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); background: var(--bg-base); position: relative; }
.trx-mosaic::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* ── Head ─────────────────────────────────────────────────────────── */
.trx-mosaic__head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
@media (max-width: 880px) { .trx-mosaic__head { grid-template-columns: 1fr; gap: var(--space-5); } }

.trx-mosaic__head-copy .trx-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.trx-mosaic__title { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0; max-width: 22ch; }

.trx-mosaic__counter { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; background: var(--brand-primary); color: var(--bg-base); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; }
.trx-mosaic__counter > span:first-child { color: var(--accent); font-weight: 500; }
.trx-mosaic__counter-sep { opacity: 0.6; margin-inline: 2px; }
.trx-mosaic__counter-total { text-transform: uppercase; color: var(--secondary-soft); }

.trx-mosaic__head-aside { display: flex; flex-direction: column; gap: var(--space-4); justify-self: end; max-width: 36ch; }
@media (max-width: 880px) { .trx-mosaic__head-aside { justify-self: start; max-width: none; } }
.trx-mosaic__lede { font-size: var(--fs-400); color: var(--ink-muted); margin: 0; line-height: 1.55; }
.trx-mosaic__archive { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--accent); width: max-content; transition: color var(--dur-fast) var(--ease-out); }
.trx-mosaic__archive:hover { color: var(--accent); }
.trx-mosaic__archive svg { transition: transform var(--dur-fast) var(--ease-out); }
.trx-mosaic__archive:hover svg { transform: translateX(4px); }

/* ── Grid ─────────────────────────────────────────────────────────── */
.trx-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-5);
}

/* Hero tile (pos 0): 7 cols x 2 rows */
.trx-mosaic__tile--pos-0 { grid-column: span 7; grid-row: span 2; }
/* Satellite right-top (pos 1): 5 cols x 1 row */
.trx-mosaic__tile--pos-1 { grid-column: span 5; grid-row: span 1; }
/* Satellite right-bottom (pos 2): 5 cols x 1 row */
.trx-mosaic__tile--pos-2 { grid-column: span 5; grid-row: span 1; }
/* Bottom-left (pos 3): 4 cols x 1 row */
.trx-mosaic__tile--pos-3 { grid-column: span 4; grid-row: span 1; }
/* Bottom-right (pos 4): 8 cols x 1 row */
.trx-mosaic__tile--pos-4 { grid-column: span 8; grid-row: span 1; }

.trx-mosaic__grid[data-count="3"] .trx-mosaic__tile--pos-1,
.trx-mosaic__grid[data-count="3"] .trx-mosaic__tile--pos-2 { grid-row: span 2; }
.trx-mosaic__grid[data-count="4"] .trx-mosaic__tile--pos-3 { grid-column: span 12; }

@media (max-width: 1024px) {
  .trx-mosaic__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trx-mosaic__tile--pos-0 { grid-column: span 6; grid-row: span 2; }
  .trx-mosaic__tile--pos-1, .trx-mosaic__tile--pos-2 { grid-column: span 3; }
  .trx-mosaic__tile--pos-3, .trx-mosaic__tile--pos-4 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .trx-mosaic__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: var(--space-4); }
  .trx-mosaic__tile { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* ── Tile ─────────────────────────────────────────────────────────── */
.trx-mosaic__tile { position: relative; opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.trx-mosaic__tile.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .trx-mosaic__tile { opacity: 1; transform: none; transition: none; } }

.trx-mosaic__link {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%; min-height: 100%;
  text-decoration: none;
  color: var(--ink-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.trx-mosaic__link:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(10,26,47,0.10); }

.trx-mosaic__tile.is-hero .trx-mosaic__link { background: var(--brand-primary); color: var(--bg-base); border-color: transparent; }
.trx-mosaic__tile.is-hero .trx-mosaic__link:hover { border-color: var(--accent); }

/* Media */
.trx-mosaic__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16/10; background: var(--secondary-soft); }
.trx-mosaic__tile.is-hero .trx-mosaic__media { aspect-ratio: auto; min-height: 320px; }
.trx-mosaic__tile--pos-3 .trx-mosaic__media, .trx-mosaic__tile--pos-4 .trx-mosaic__media { aspect-ratio: 16/9; }
.trx-mosaic__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
.trx-mosaic__link:hover .trx-mosaic__media img { transform: scale(1.05); }
.trx-mosaic__media-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,74,0) 35%, rgba(11,42,74,0.62) 100%); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.trx-mosaic__tile.is-hero .trx-mosaic__media-veil { background: linear-gradient(180deg, rgba(11,42,74,0.1) 0%, rgba(11,42,74,0.85) 100%); }
.trx-mosaic__link:hover .trx-mosaic__media-veil { opacity: 0.72; }

.trx-mosaic__num {
  position: absolute; top: var(--space-4); left: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.18em;
  color: var(--bg-base); background: rgba(10,26,47,0.55);
  padding: 4px 10px; border-radius: var(--radius-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.trx-mosaic__period {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bg-base); background: rgba(232,117,26,0.92);
  padding: 4px 10px; border-radius: var(--radius-pill);
}

/* Body */
.trx-mosaic__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.trx-mosaic__tile.is-hero .trx-mosaic__body { padding: var(--space-6); gap: var(--space-4); }

.trx-mosaic__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0; font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.trx-mosaic__tile.is-hero .trx-mosaic__meta { color: var(--secondary-soft); }
.trx-mosaic__client { color: var(--ink-primary); }
.trx-mosaic__tile.is-hero .trx-mosaic__client { color: var(--bg-base); }
.trx-mosaic__sector::before { content: '·'; margin-right: var(--space-2); opacity: 0.6; }

.trx-mosaic__tile-title { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; margin: 0; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.trx-mosaic__tile.is-hero .trx-mosaic__tile-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--bg-base); }

.trx-mosaic__challenge, .trx-mosaic__outcome { margin: 0; font-size: var(--fs-300); line-height: 1.55; color: var(--ink-muted); display: flex; flex-direction: column; gap: 4px; }
.trx-mosaic__tile.is-hero .trx-mosaic__challenge, .trx-mosaic__tile.is-hero .trx-mosaic__outcome { color: rgba(245,241,234,0.82); }
.trx-mosaic__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.trx-mosaic__challenge .trx-mosaic__label::after, .trx-mosaic__outcome .trx-mosaic__label::after { content: ' →'; opacity: 0.7; }

.trx-mosaic__foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); border-top: 1px dashed var(--line); }
.trx-mosaic__tile.is-hero .trx-mosaic__foot { border-top-color: rgba(245,241,234,0.18); }
.trx-mosaic__metric { display: flex; flex-direction: column; gap: 2px; }
.trx-mosaic__metric-value { font-family: var(--font-display); font-size: var(--fs-600); line-height: 1; color: var(--brand-primary); letter-spacing: -0.02em; }
.trx-mosaic__tile.is-hero .trx-mosaic__metric-value { color: var(--accent); font-size: var(--fs-700); }
.trx-mosaic__metric-label { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.trx-mosaic__tile.is-hero .trx-mosaic__metric-label { color: var(--secondary-soft); }
.trx-mosaic__read { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.trx-mosaic__read span { transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
.trx-mosaic__link:hover .trx-mosaic__read span { transform: translateX(4px); }

/* Hero tile: imagen ocupando todo, body sobrepuesto */
.trx-mosaic__tile.is-hero .trx-mosaic__link { grid-template-rows: 1fr; }
.trx-mosaic__tile.is-hero .trx-mosaic__media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.trx-mosaic__tile.is-hero .trx-mosaic__body { position: relative; z-index: 2; align-self: end; }

/* Foot CTA */
.trx-mosaic__foot-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-5); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
@media (max-width: 720px) { .trx-mosaic__foot-cta { grid-template-columns: 1fr; gap: var(--space-4); } }
.trx-mosaic__foot-note { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink-muted); font-size: var(--fs-300); max-width: 64ch; margin: 0; line-height: 1.6; }
.trx-mosaic__foot-icon { color: var(--accent); font-size: var(--fs-500); line-height: 1; }
.trx-mosaic__foot-cta .trx-btn { white-space: nowrap; }
.trx-mosaic__foot-cta .trx-btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.trx-mosaic__foot-cta .trx-btn:hover .trx-btn__arrow { transform: translateX(3px); }

.trx-mosaic__empty { color: var(--ink-muted); font-size: var(--fs-400); }