/* Featured client story composition. */
#clientes .ref-featured {
  width: min(100%, 90vw, 1280px);
  max-width: 1280px;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid #263039;
}
#clientes .ref-featured-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}
#clientes .ref-featured-head .eyebrow {
  color: #b6bdc9;
  font: 600 11px/1.3 Poppins, Arial, sans-serif;
  letter-spacing: .09em;
}
#clientes .ref-featured-head h2 {
  margin-top: 6px;
  color: #fff;
  font: 600 clamp(24px, 2vw, 29px)/1.2 Poppins, Arial, sans-serif;
  letter-spacing: -.025em;
}
#clientes .ref-featured-head .featured-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 1px;
}
#clientes #featured-counter {
  margin: 0;
  min-width: 72px;
  color: #2389ff;
  font: 500 14px/1 Quedora, Arial, sans-serif;
  letter-spacing: .09em;
  white-space: nowrap;
}
#clientes .featured-progress {
  width: 80px;
  height: 2px;
  margin: 0 14px 0 0;
  background: linear-gradient(90deg, #2389ff 0 45%, transparent 45% 57%, #253a55 57%);
}
#clientes .ref-featured-head button {
  width: 40px;
  height: 40px;
  border: 1px solid #38516c;
  border-radius: 50%;
  color: #168bff;
  background: #02060a;
  font: 30px/1 Arial, sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
#clientes .ref-featured-head button:is(:hover, :focus-visible) {
  border-color: #2389ff;
  color: #73bdff;
  box-shadow: 0 0 17px #2389ff55;
}
#clientes .ref-featured-card {
  grid-template-columns: 41% 59%;
  grid-template-rows: clamp(378px, 32.4vw, 444px);
  height: clamp(378px, 32.4vw, 444px);
  min-height: 0;
  margin-bottom: 0;
  align-items: stretch;
  gap: 0;
}
#clientes .ref-featured-card > img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(378px, 32.4vw, 444px);
  max-height: 444px;
  clip-path: polygon(24% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 24% 100%, 0 75%, 0 25%);
}
#clientes .ref-featured-card > .featured-content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: -95px;
  padding: 55px 72px 58px 198px;
  border: 1px solid #166aaf;
  clip-path: polygon(0 0, 93% 0, 100% 11%, 100% 90%, 94% 100%, 0 100%, 11% 76%, 11% 25%);
  background: radial-gradient(ellipse at 25% 110%, #20549eaa, transparent 48%),
    linear-gradient(125deg, #111a2c, #02050a 70%);
}
#clientes .ref-featured-card .eyebrow {
  margin: 0;
  color: #d5dbe5;
  font: 700 10px/1.2 Poppins, Arial, sans-serif;
  letter-spacing: .2em;
}
#clientes .ref-featured-card blockquote {
  max-width: 600px;
  margin: 17px 0 32px;
  color: #eef2f8;
  font: italic 500 clamp(21px, 1.9vw, 27px)/1.42 Poppins, Arial, sans-serif;
  letter-spacing: .01em;
}
#clientes .ref-featured-card blockquote.is-direct-quote::before,
#clientes .ref-featured-card blockquote.is-direct-quote::after {
  color: #2389ff;
  font-style: normal;
  font-weight: 700;
}
#clientes .ref-featured-card blockquote.is-direct-quote::before { content: '“'; }
#clientes .ref-featured-card blockquote.is-direct-quote::after { content: '”'; }
#clientes .featured-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#clientes .featured-person-mark {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #245fb2;
  border-radius: 5px;
  color: #2389ff;
  font: 800 29px/1 Arial, sans-serif;
}
#clientes .featured-person-mark[data-brand="markey"] {
  border-color: #7432b8;
  color: #be338d;
  font-size: 34px;
}
#clientes .featured-person h3 {
  margin: 0 0 2px;
  color: #ed195b;
  font: 700 20px/1.2 Poppins, Arial, sans-serif;
  letter-spacing: .02em;
}
#clientes .featured-person #featured-role {
  margin: 0;
  color: #a6b4c8;
  font: 400 13px/1.3 Poppins, Arial, sans-serif;
}
#clientes .featured-lower {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 19px;
  border-top: 1px solid #087bcf;
}
#clientes .featured-seal {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #8eacd1;
  font: 600 9px/1.15 Poppins, Arial, sans-serif;
  letter-spacing: .16em;
}
#clientes .featured-seal svg {
  flex: 0 0 32px;
  width: 32px;
  height: 38px;
  color: #448fff;
}
#clientes .featured-dots {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
#clientes .featured-dots button {
  width: 13px;
  height: 15px;
  background: #526178;
}
#clientes .featured-dots button[aria-pressed="true"] { background: #2389ff; }

@media (max-width: 850px) {
  #clientes .ref-featured { width: min(100%, 640px); padding-top: 24px; }
  #clientes .ref-featured-head { align-items: flex-start; gap: 17px; }
  #clientes .ref-featured-card {
    display: flex;
    flex-direction: column;
    height: auto;
    touch-action: pan-y;
  }
  #clientes .ref-featured-card > img {
    width: min(100%, 480px);
    height: 340px;
    max-height: none;
    margin: 0 auto;
  }
  #clientes .ref-featured-card > .featured-content {
    min-height: 340px;
    margin: -15px 0 0;
    padding: 46px 32px 28px;
    border-radius: 14px;
    clip-path: none;
  }
}
@media (max-width: 650px) {
  #clientes .ref-featured-head .featured-controls { gap: 12px; }
  #clientes .featured-progress { width: 55px; margin-right: 2px; }
  #clientes .ref-featured-card > img { height: 285px; }
  #clientes .ref-featured-card > .featured-content { min-height: 350px; padding: 35px 22px 24px; }
  #clientes .ref-featured-card blockquote { font-size: 19px; }
  #clientes .featured-person h3 { font-size: 17px; }
  #clientes .featured-person #featured-role { font-size: 12px; }
  #clientes .featured-seal { font-size: 7px; }
  #clientes .featured-seal svg { width: 25px; height: 30px; flex-basis: 25px; }
}