/* ============================================================
   ARE Trüst — "Ecosistema" page polish
   Additive ONLY. Loads after css/aretrust-polish.css.
   Goal: give the dark / black surfaces QUIET, JEWEL-LIKE DEPTH —
   soft emerald radial glow, 1px emerald/gold hairlines at low
   opacity, gentle gradient sheen — without ever hurting the
   crisp-white text contrast. Refine the "El Viaje de la Gema"
   journey numerals, the certification/monetization tabs, and the
   hero spec corners.
   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. Dark sections — atmospheric emerald depth
   ------------------------------------------------------------
   section-pp-features (black, the intro grid) and
   section-black-background (the "Tecnología" band) read as flat
   black. We layer a soft, off-axis emerald radial + a faint gold
   counter-glow BEHIND the content via ::before (z-index:0) so all
   text and cards stay perfectly crisp on top.
   ============================================================ */

.section.section-pp-features,
.section.section-black-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section.section-pp-features > *,
.section.section-black-background > * {
  position: relative;
  z-index: 1;
}
.section.section-pp-features::before,
.section.section-black-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 60% at 12% 8%,  rgba(10, 122, 77, .20), transparent 62%),
    radial-gradient(48% 55% at 92% 96%, rgba(201, 164, 76, .07), transparent 60%);
}

/* A whisper-thin emerald hairline to separate the dark bands from
   the light sections that bracket them. */
.section.section-black-background {
  border-top: 1px solid rgba(10, 122, 77, .22);
  border-bottom: 1px solid rgba(10, 122, 77, .22);
}

/* ============================================================
   2. Black journey cards (card-black) — jewel-like, not flat
   ------------------------------------------------------------
   Add a low-opacity emerald hairline ring, an internal top sheen,
   a contained emerald glow, and a restrained hover lift. Text and
   images keep z-index above the decorative glow.
   ============================================================ */

.card.card-black {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 24px 60px -40px rgba(0, 0, 0, .9);
  transition:
    transform .6s var(--ar-ease),
    box-shadow .6s var(--ar-ease),
    border-color .6s var(--ar-ease);
}
.card.card-black::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(70% 80% at 8% 0%, rgba(10, 122, 77, .16), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 30%);
}
.card.card-black > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .card.card-black:hover {
    transform: translateY(-5px);
    border-color: rgba(10, 122, 77, .38);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .07),
      0 34px 70px -38px rgba(0, 0, 0, .95),
      0 0 44px -18px rgba(10, 122, 77, .45);
  }
}

/* The big horizontal "El Viaje de la Gema" card (black grid). */
.large-horizontal-card-grid--black {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.large-horizontal-card-grid--black::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 90% at 0% 0%, rgba(10, 122, 77, .18), transparent 55%);
}
.large-horizontal-card-grid--black > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   3. "El Viaje de la Gema" journey numerals
   ------------------------------------------------------------
   The step titles ("1. Origen…", "2. Transformación…") get a warm
   gold cast on the leading numeral feel — applied via a refined
   gold accent rule + tightened tracking. Whole inverse heading
   stays crisp white; we only warm + space it.
   ============================================================ */

.card.card-black .heading-h4.heading-h4-inverse {
  letter-spacing: -.01em;
}
/* A short gold rule above each step heading as a quiet connector */
.card.card-black .card-medium-text-wrapper .heading-h4-inverse::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--ar-gold), rgba(201, 164, 76, 0));
  opacity: .85;
}

/* ============================================================
   4. Hero spec corners (Origen Ético / Transformación / Valor)
   ------------------------------------------------------------
   The white-bordered corner boxes over the hero banner get a
   touch of emerald in their border + a softer blur panel so they
   feel set into the jewel imagery rather than stuck on top.
   ============================================================ */

.spec-wrapper {
  border-top-color: rgba(231, 242, 238, .8);
  border-right-color: rgba(231, 242, 238, .8);
  transition: border-color .55s var(--ar-ease);
}
.specs-blur-wrapper {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(201, 164, 76, .28);
  transition: background-color .55s var(--ar-ease);
}
.specs-txt {
  letter-spacing: .01em;
}

@media (prefers-reduced-motion: no-preference) {
  .spec-wrapper:hover {
    border-top-color: var(--ar-gold);
    border-right-color: var(--ar-gold);
  }
}

/* ============================================================
   5. Top feature hairlines (white-line) — emerald warmth
   ------------------------------------------------------------
   The four "Acceso Directo / Maestría / …" columns sit on white
   hairlines. Tint them toward emerald-gold so the dark hero
   features feel cohesive with the brand.
   ============================================================ */

.feature-wrapper-w-line.white-line {
  border-top-color: rgba(201, 164, 76, .45);
  transition: border-top-color .55s var(--ar-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .feature-wrapper-w-line.white-line:hover {
    border-top-color: var(--ar-gold);
  }
}

/* ============================================================
   6. Certification / Monetization tabs — refined affordance
   ------------------------------------------------------------
   These tabs (.tab) live on LIGHT sections, so keep dark text.
   Refine the top-border affordance with an emerald active state
   and a smooth grow-in underline on hover.
   ============================================================ */

.tabs-wrapper .tab {
  transition:
    border-top-color .45s var(--ar-ease),
    color .45s var(--ar-ease),
    opacity .45s var(--ar-ease);
}
.tabs-wrapper .tab:hover {
  border-top-color: var(--ar-emerald-bright) !important;
}
.tabs-wrapper .tab.w--current {
  border-top-color: var(--ar-emerald) !important;
}
/* Warm the active step numeral heading */
.tabs-wrapper .tab.w--current .heading-h4 {
  color: var(--ar-emerald-deep);
}

/* ============================================================
   7. Translucent dark card (feature-list-grey-card-white)
   ------------------------------------------------------------
   On the black "Tecnología" band: give the #ffffff1f card a
   faint emerald hairline + inner sheen so it reads as glass, not
   a grey rectangle. Background stays as Webflow set it.
   ============================================================ */

.feature-list-grey-card.feature-list-grey-card-white {
  border: 1px solid rgba(10, 122, 77, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Icon wrappers on dark — quiet gold tick before the feature list
   content for scan rhythm (decorative, additive). */
.section-black-background .feature-list-icon-wrapper {
  transition: transform .5s var(--ar-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .section-black-background .feature-list-item-wrapper:hover .feature-list-icon-wrapper {
    transform: translateX(3px);
  }
}

/* ============================================================
   8. Label headings — refined uppercase eyebrow
   ------------------------------------------------------------
   The "Nuestra Cadena De Valor" / "El Estándar de ARE" eyebrows
   get a small leading gold tick + tracking for editorial poise.
   ============================================================ */

.label-heading {
  position: relative;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label-heading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: .6rem;
  vertical-align: middle;
  background: var(--ar-gold);
  opacity: .9;
}
.label-heading.label-heading-white {
  color: #fff;
}
.label-heading.label-heading-white::before {
  background: var(--ar-gold);
  opacity: 1;
}

/* ============================================================
   9. Banner images — restrained zoom on hover
   ============================================================ */
.div-block-6,
.div-block-7 {
  overflow: hidden;
}
.image-10,
.image-11 {
  transition: transform 1.4s var(--ar-ease);
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .div-block-6:hover .image-11,
  .div-block-7:hover .image-10 {
    transform: scale(1.035);
  }
}

/* ============================================================
   10. Reduced-motion safety net
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .card.card-black,
  .spec-wrapper,
  .specs-blur-wrapper,
  .feature-wrapper-w-line.white-line,
  .tabs-wrapper .tab,
  .section-black-background .feature-list-icon-wrapper,
  .image-10,
  .image-11 {
    transition: none !important;
  }
}