/* ============================================================
   ARE Trüst — "Quiénes Somos" page polish
   Additive ONLY. Loads after css/aretrust-polish.css.
   Editorial-luxury refinements: emerald emphasis on the stats
   row, pull-quote treatment, principles rhythm, image-card hovers.
   No display / position / grid / flex / size changes to Webflow nodes.
   Tokens + easings only. Respects prefers-reduced-motion.
   ============================================================ */

:root {
  --ar-emerald:        #015d3a;
  --ar-emerald-deep:   #012e1d;
  --ar-emerald-bright: #0a7a4d;
  --ar-forest:         #172d1b;
  --ar-mint:           #e7f2ee;
  --ar-gold:           #c9a44c;

  --ar-ease:      cubic-bezier(.22, 1, .36, 1);
  --ar-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ar-ease-io:   cubic-bezier(.65, 0, .35, 1);
}

/* ============================================================
   1. "Nuestra Dimensión en Números" — stats row
   ------------------------------------------------------------
   The mint cards stay; we lift them with a hairline ring, a
   quiet hover, and give the big numerals refined emerald
   emphasis with a consistent serif baseline + a gold separator.
   ============================================================ */

.metrics-card {
  position: relative;
  border: 1px solid rgba(1, 93, 58, .10);
  transition:
    transform .55s var(--ar-ease),
    box-shadow .55s var(--ar-ease),
    border-color .55s var(--ar-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .metrics-card:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 93, 58, .22);
    box-shadow: 0 22px 44px -28px rgba(1, 93, 58, .38);
  }
}

/* Big numerals: deep emerald, optical tracking, even baseline */
.metrics-value {
  color: var(--ar-emerald) !important;
  letter-spacing: -.018em;
  font-feature-settings: "lnum" 1, "kern" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Tasteful gold separator between the numeral and its label */
.metrics-heading {
  position: relative;
  color: var(--text--default--black-light, #666);
}
.metrics-heading::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 0 auto .85rem;
  background: linear-gradient(90deg,
    rgba(201, 164, 76, 0), var(--ar-gold) 50%, rgba(201, 164, 76, 0));
  opacity: .7;
}

/* ============================================================
   2. "Un Propósito que Transforma" — pull-quote treatment
   ------------------------------------------------------------
   Lead the long passage with an emerald accent rail; warm the
   "Nuestra Esencia" caption under the wordmark.
   ============================================================ */

.grid-3-column .heading-h3 {
  position: relative;
  color: var(--ar-emerald-deep);
}
.grid-3-column .heading-h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--ar-emerald), var(--ar-gold));
  border-radius: 2px;
}

/* First paragraph of the propósito column reads as a lead-in */
.grid-3-column .paragraph-18 {
  text-wrap: pretty;
}

.about-logo-wrapper .paragraph-16 {
  color: var(--ar-emerald);
  letter-spacing: .005em;
  font-style: italic;
}

/* ============================================================
   3. "Expertise que Construye Valor" — text points rhythm
   ------------------------------------------------------------
   Each point gets a quiet emerald marker for scan rhythm.
   ============================================================ */

.text-points-container {
  position: relative;
  padding-left: 1.15rem;
}
.text-points-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 3px;
  height: 1.15em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ar-emerald-bright), var(--ar-emerald));
  opacity: .85;
}
.text-points-container .heading-h4 {
  color: var(--ar-emerald-deep);
}

/* ============================================================
   4. "Principios que Guían Nuestro Futuro"
   ------------------------------------------------------------
   The Misión / Visión / Valores subheads get a small emerald
   tick so the list breathes with a consistent rhythm.
   ============================================================ */

.section-light-grey .heading-2 {
  position: relative;
  padding-left: .95rem;
  color: var(--ar-emerald-deep);
}
.section-light-grey .heading-2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 3px;
  border-radius: 3px;
  background: var(--ar-gold);
  opacity: .8;
}

/* ============================================================
   5. "Nuestro Compromiso con el Bien Común" — image cards
   ------------------------------------------------------------
   .profile-card is a dark gradient image card (not .card, so the
   shared hover doesn't reach it). Give it the same restrained
   lift + slow image zoom, plus a warm gold title cue.
   ============================================================ */

.profile-card {
  transition:
    transform .6s var(--ar-ease),
    box-shadow .6s var(--ar-ease);
  will-change: transform;
}
.profile-picture-image {
  transition: transform 1.3s var(--ar-ease);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -32px rgba(1, 46, 29, .55);
  }
  .profile-card:hover .profile-picture-image {
    transform: scale(1.05);
  }
}

/* Card title: subtle gold underline that grows on hover */
.profile-card .news-heading.card-title-white {
  position: relative;
}
.profile-card .news-heading.card-title-white::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: .6rem;
  background: var(--ar-gold);
  opacity: .85;
  transition: width .55s var(--ar-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .profile-card:hover .news-heading.card-title-white::after {
    width: 48px;
  }
}

/* ============================================================
   6. Section lead paragraph (paragraph-35) — quieter, wider
   ============================================================ */

.paragraph-35 {
  color: var(--text--default--black-medium, #444);
  text-wrap: pretty;
}

/* ============================================================
   7. Reduced-motion safety net
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .metrics-card,
  .profile-card,
  .profile-picture-image,
  .profile-card .news-heading.card-title-white::after {
    transition: none !important;
  }
}