/* =====================================================================
   ENFOQUE INSTITUCIONAL — dark editorial manifesto
   ===================================================================== */
#enfoque {
  background: var(--dark-bg);
  overflow: clip;
  isolation: isolate;
}
#enfoque::before {
  /* hairline gold rule across the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold) 30%, var(--line-gold) 70%, transparent);
  opacity: .7;
}

/* ---- ambient glow ---- */
#enfoque .enfoque__glow {
  position: absolute;
  top: -12%;
  right: -8%;
  width: min(60vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold-500) 26%, transparent), transparent 68%);
  filter: blur(36px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}

/* ---- framed cheese accent ---- */
#enfoque .enfoque__accent {
  position: absolute;
  z-index: 0;
  top: clamp(2rem, 6vw, 5rem);
  right: var(--gutter);
  width: clamp(180px, 26vw, 340px);
  aspect-ratio: 619 / 495;
  border-radius: var(--r-lg);
  overflow: clip;
  box-shadow: var(--sh-4);
  pointer-events: none;
}
#enfoque .enfoque__accent-img {
  width: 100%;
  height: 122%;
  margin-top: -11%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}
#enfoque .enfoque__accent::after {
  /* darken-blend so it sinks into the bg */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--dark-bg) 35%, transparent),
              color-mix(in oklab, var(--dark-bg) 70%, transparent));
  mix-blend-mode: multiply;
}
#enfoque .enfoque__accent-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--dark-line);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold-500) 14%, transparent);
}

/* ---- layout ---- */
#enfoque .enfoque__inner {
  position: relative;
  z-index: 2;
}
#enfoque .enfoque__head {
  margin-bottom: clamp(2rem, 1rem + 4vw, 3.4rem);
}

#enfoque .enfoque__quote {
  position: relative;
  max-width: 22ch;
  max-width: min(100%, 60rem);
}

/* giant quotation mark */
#enfoque .enfoque__mark {
  position: absolute;
  top: clamp(-2.4rem, -1rem - 4vw, -1rem);
  left: -.06em;
  font-family: var(--font-display);
  font-weight: 540;
  font-size: clamp(7rem, 4rem + 16vw, 16rem);
  line-height: .6;
  color: var(--gold-500);
  opacity: .26;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

/* editorial pull-quote body */
#enfoque .enfoque__lead {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: var(--step-3);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  text-wrap: pretty;
  max-width: 26ch;
  max-width: min(100%, 44ch);
}
#enfoque .enfoque__lead strong {
  font-weight: 600;
  color: var(--gold-300);
}
#enfoque .enfoque__hl {
  color: var(--on-dark);
  background: linear-gradient(transparent 62%, color-mix(in oklab, var(--gold-500) 30%, transparent) 0);
  padding-inline: .06em;
}

/* ---- climactic statement ---- */
#enfoque .enfoque__climax {
  margin-top: clamp(2.4rem, 1.5rem + 4vw, 4rem);
  font-family: var(--font-display);
  font-weight: 540;
  font-size: var(--step-6);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--on-dark);
  text-wrap: balance;
}
#enfoque .enfoque__climax-line {
  display: block;
}
#enfoque .enfoque__gold {
  font-style: italic;
  color: var(--gold-400);
}

/* word-by-word reveal (bespoke js adds spans + .is-lit) */
#enfoque .enfoque__word {
  display: inline-block;
  opacity: .16;
  transition: opacity .5s var(--ease-out-expo);
}
#enfoque .enfoque__word.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #enfoque .enfoque__word { opacity: 1; }
}

/* ---- footer: attribution + cta ---- */
#enfoque .enfoque__foot {
  margin-top: clamp(2.6rem, 1.6rem + 4vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
}
#enfoque .enfoque__cite {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--on-dark-mute);
}
#enfoque .enfoque__cite img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
#enfoque .enfoque__cta { will-change: transform; }

@media (max-width: 860px) {
  #enfoque .enfoque__accent {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 320px;
    margin-bottom: clamp(2rem, 1rem + 4vw, 3rem);
  }
  #enfoque .enfoque__lead { max-width: none; }
  #enfoque .enfoque__quote { max-width: none; }
}