/* ============================================================
   Tri component: "Mission / Vision / Purpose" 3-card grid.

   font-size below is a literal clamp(), not var(--fz-h1): the source
   redefines --fz-h1 inside empresa.css's own :root with different
   clamp bounds (48-128px) than the shared one used by every other
   page's Inter-based headings (44-120px, see base.css). Since every
   component's CSS loads on every page, reusing the token name would
   have silently shifted this to the wrong size instead of colliding
   outright — same trap as the class-name collisions on publicitario,
   but at the custom-property level. Do the same for any other empresa
   heading that references var(--fz-h1)/var(--fz-h2) in the source.
   ============================================================ */

.tri {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg-alt);
  border-top: 1px solid rgba(20, 20, 20, 0.08);
}
.tri__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.tri__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tri__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin-bottom: 4.5rem;
  text-wrap: balance;
}
.tri__title em {
  font-style: italic;
  color: var(--blue);
}
.tri__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem;
  border-top: 1px solid rgba(20, 20, 20, 0.22);
}
@media (max-width: 900px) {
  .tri__grid {
    grid-template-columns: 1fr;
  }
}
.tri__card {
  padding: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tri__label {
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--black);
}
.tri__text {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.45;
  color: #1c1c1c;
  font-weight: 400;
  text-wrap: pretty;
}
.tri__text b {
  font-weight: 600;
  color: var(--black);
}