/* ============================================================
   ARE Trüst — HOME PAGE polish (additive only)
   Page-specific refinements layered on top of aretrust-polish.css.
   Tokens + easings only. No layout structure changes.
   ============================================================ */

: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. Heading rhythm — eyebrow ↔ headline relationship
   ============================================================ */

/* "Los Cimientos…" intro: tighten the gap so the heading and its
   supporting paragraph read as one unit, with breathing room below. */
.heading-max-width-wrapper .heading-h2 {
  letter-spacing: -0.012em;
}
.heading-max-width-wrapper .paragraph-18.margin-bottom-1rem {
  max-width: 46rem;
}

/* CTA eyebrow: turn the "Su Próximo Paso Estratégico" line into a
   refined gold-accented kicker sitting above the headline. */
.section--cta .cta-text-wrapper .paragraph-18-inverse.margin-bottom-0-25rem {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  color: var(--ar-gold);
  opacity: 0.9;
  position: relative;
  padding-left: 2.6rem;
}
@media (prefers-reduced-motion: no-preference){
  .section--cta .cta-text-wrapper .paragraph-18-inverse.margin-bottom-0-25rem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 1.9rem;
    height: 1px;
    background: var(--ar-gold);
    opacity: 0.65;
    transform-origin: left center;
    animation: ar-kicker-line 1.1s var(--ar-ease) both;
    animation-delay: 0.2s;
  }
}
@media (prefers-reduced-motion: reduce){
  .section--cta .cta-text-wrapper .paragraph-18-inverse.margin-bottom-0-25rem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 1.9rem;
    height: 1px;
    background: var(--ar-gold);
    opacity: 0.65;
  }
}
@keyframes ar-kicker-line {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.65; }
}

/* "El Proceso" / "Aliados" section headings: subtle optical kerning
   so the large serif sits as tightly as the hero. */
.heading-h2.margin-bottom-1-5rem {
  letter-spacing: -0.012em;
}

/* ============================================================
   2. Hero — refined CTA link detailing
   (shared layer owns the underline + arrow; this adds the kicker dot)
   ============================================================ */

.section-hp-hero .button-tertiary.top-padding {
  letter-spacing: 0.01em;
}
.section-hp-hero .hero-text-wrapper .paragraph-18 {
  max-width: 34rem;
}

/* ============================================================
   3. Dark "El arte de la transformación" banner — atmospheric depth
   Quiet emerald radial glow over the photo; text stays bright.
   The banner is .section--intro with .background-image-wrapper inside.
   ============================================================ */

.section.section--intro { position: relative; isolation: isolate; }

/* Glow + a faint vignette to seat the centered text — sits ABOVE the
   photo wrapper but BELOW the .intro-text (which is position:relative). */
.section.section--intro .background-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 75% at 50% 46%, rgba(10,122,77,0.22), transparent 62%),
    radial-gradient(120% 120% at 50% 120%, rgba(1,46,29,0.55), transparent 55%);
  mix-blend-mode: screen;
}
/* Keep the headline crisp and above the glow. */
.section.section--intro .intro-text.txt-white {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 30px rgba(1,46,29,0.45);
}

/* ============================================================
   4. "El Proceso que Transforma Valor" — refined numbered steps
   The tab row (.tabs-menu-3) becomes 01 / 02 / 03 process steps.
   ::before adds a small numeral before each label — additive, the
   tab links are inline-block so this only prefixes content.
   ============================================================ */

.tabs-menu-3 { counter-reset: ar-step; }

.tabs-menu-3 .w-tab-link { position: relative; }
.tabs-menu-3 .w-tab-link > div {
  position: relative;
  display: inline-block;
}
.tabs-menu-3 .w-tab-link > div::before {
  counter-increment: ar-step;
  content: "0" counter(ar-step);
  display: inline-block;
  margin-right: 0.7em;
  font-family: "Work Sans", sans-serif;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ar-gold);
  opacity: 0.65;
  vertical-align: 0.12em;
  transition: opacity .45s var(--ar-ease), color .45s var(--ar-ease);
}
/* Active step: numeral brightens to read as "you are here". */
.tabs-menu-3 .w-tab-link.w--current > div::before {
  opacity: 1;
  color: var(--ar-gold);
}

/* Connector: a hairline that ties the process steps together, drawn
   under the tab row without altering its flex layout. */
.tabs-2 { position: relative; }
.tabs-menu-3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(1,93,58,0.18) 12%,
    rgba(1,93,58,0.18) 88%,
    transparent);
  pointer-events: none;
}

/* Process copy: give the step descriptions a touch more measure. */
.paragraph-34 { max-width: 30rem; }

/* ============================================================
   5. Feature cards — quiet emerald depth on the dark card
   (.card hover lift/zoom already handled by shared layer)
   ============================================================ */

.card.card-black { position: relative; isolation: isolate; overflow: hidden; }
.card.card-black::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(10,122,77,0.16), transparent 65%);
}
.card.card-black > * { position: relative; z-index: 1; }

/* Hairline gold rule under the feature-grid heading wrapper, echoing
   the editorial dividers used elsewhere. Decorative only. */
.feature-grid { position: relative; }

/* ============================================================
   6. "Aliados Estratégicos" partner logo row — desaturate at rest,
   bloom to full on hover. Real markup is plain <img> in .grid-6.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  .grid-6 img {
    filter: grayscale(100%);
    opacity: 0.55;
    transition:
      filter .55s var(--ar-ease),
      opacity .55s var(--ar-ease),
      transform .55s var(--ar-ease);
    will-change: filter, opacity;
  }
  .grid-6:hover img { opacity: 0.4; }
  .grid-6 img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
  }
}
/* Reduced motion: keep the tasteful resting state, drop the transition. */
@media (prefers-reduced-motion: reduce){
  .grid-6 img {
    filter: grayscale(100%);
    opacity: 0.6;
  }
  .grid-6 img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
}

/* ============================================================
   7. FAQ — refined question affordance + divider rhythm
   (reveal + icon + hover color already handled by shared layer)
   ============================================================ */

.faq-accordion {
  border-bottom: 1px solid rgba(1,93,58,0.10);
}
.faq-question .faq-heading {
  transition: letter-spacing .5s var(--ar-ease);
}
@media (prefers-reduced-motion: no-preference){
  .faq-accordion:hover .faq-heading {
    letter-spacing: 0.004em;
  }
}

/* ============================================================
   8. CTA band — pair with shared glow; lift the headline kerning
   (shared layer owns the radial glow background on .section--cta)
   ============================================================ */

.section--cta .heading-4 {
  letter-spacing: -0.01em;
}
.section--cta .cta-button-wrapper { position: relative; }