/* ============================================================
   Mosaico Comunicacao Interna page
   ============================================================ */

.alfa-mci {
  --alfa-mci-ink: #172340;
  --alfa-mci-blue: #9fc5ff;
  --alfa-mci-paper: #f8f8f9;
  --alfa-mci-dot: #9fc5ff;
  background: var(--alfa-mci-paper);
  color: var(--alfa-mci-ink);
  overflow: hidden;
}

.alfa-screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.alfa-mci-hero {
  background: var(--alfa-mci-blue);
  padding: clamp(112px, 13vw, 170px) 0 clamp(72px, 8vw, 92px);
}

.alfa-mci-hero-inner {
  align-items: center;
  display: flex;
  gap: clamp(34px, 6vw, 84px);
  justify-content: center;
  min-height: 150px;
}

.alfa-mci-product-mark {
  min-width: 0;
}

.alfa-mci-title {
  align-items: center;
  color: var(--alfa-mci-ink);
  display: flex;
  gap: 13px;
  margin: 0;
  text-transform: uppercase;
}

.alfa-mci-title-small,
.alfa-mci-title-main {
  color: var(--alfa-mci-ink);
  display: block;
  font-family: var(--font-figtree);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 0.86;
  text-shadow:
    2px 2px 0 var(--alfa-white),
    -1px -1px 0 var(--alfa-white),
    1px -1px 0 var(--alfa-white),
    -1px 1px 0 var(--alfa-white);
  transform: skewX(-7deg);
}

.alfa-mci-title-small {
  font-size: clamp(25px, 3.4vw, 43px);
  max-width: 190px;
}

.alfa-mci-title-main {
  font-size: clamp(39px, 6.2vw, 76px);
}

.alfa-mci-mosaico-mark {
  color: var(--alfa-mci-ink);
  flex: 0 0 auto;
  font-family: var(--font-figtree);
  text-transform: uppercase;
}

.alfa-mci-mosaico-mark span {
  display: block;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.alfa-mci-mosaico-mark strong {
  align-items: center;
  display: flex;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.86;
}

.alfa-mci-mosaico-mark i {
  border-bottom: 0.2em solid transparent;
  border-left: 0.25em solid #5f87cd;
  border-top: 0.2em solid transparent;
  display: inline-block;
  height: 0;
  margin: 0 0.05em 0 0.04em;
  position: relative;
  transform: rotate(-42deg);
  width: 0;
}

.alfa-mci-mosaico-mark i::after {
  border-bottom: 0.14em solid transparent;
  border-left: 0.17em solid var(--alfa-mci-ink);
  border-top: 0.14em solid transparent;
  content: '';
  left: -0.19em;
  position: absolute;
  top: -0.14em;
}

.alfa-mci-content {
  background: var(--alfa-mci-paper);
  min-height: clamp(560px, 70vw, 900px);
  padding: clamp(72px, 8vw, 98px) 0 clamp(112px, 14vw, 178px);
}

.alfa-mci-content-grid {
  display: grid;
  gap: clamp(70px, 12vw, 145px);
  grid-template-columns: minmax(0, 330px) minmax(0, 480px);
  justify-content: center;
}

.alfa-mci-about p,
.alfa-mci-benefits-list li {
  color: var(--alfa-mci-ink);
  font-family: var(--font-figtree);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.32;
  margin: 0;
}

.alfa-mci-about p + p {
  margin-top: 34px;
}

.alfa-mci-benefits h2 {
  color: var(--alfa-mci-ink);
  font-family: var(--font-figtree);
  font-size: clamp(34px, 4vw, 48px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.9;
  margin: 0 0 34px;
  text-transform: uppercase;
  transform: skewX(-7deg);
}

.alfa-mci-benefits-list {
  display: grid;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.alfa-mci-benefits-list li {
  padding-left: 22px;
  position: relative;
}

.alfa-mci-benefits-list li::before {
  background: var(--alfa-mci-dot);
  border-radius: 50%;
  content: '';
  height: 6px;
  left: 0;
  position: absolute;
  top: 0.62em;
  width: 6px;
}

@media (max-width: 991.98px) {
  .alfa-mci-hero-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .alfa-mci-content-grid {
    gap: 64px;
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .alfa-mci-about {
    max-width: 520px;
  }
}

@media (max-width: 767.98px) {
  .alfa-mci-hero {
    padding-top: 96px;
  }

  .alfa-mci-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .alfa-mci-title-small {
    max-width: none;
  }

  .alfa-mci-content {
    min-height: 0;
  }

  .alfa-mci-about p,
  .alfa-mci-benefits-list li {
    font-size: 16px;
    letter-spacing: -0.025em;
    line-height: 1.5;
  }

  .alfa-mci-benefits-list {
    gap: 24px;
  }
}

@media (max-width: 575.98px) {
  .alfa-mci-hero {
    padding-bottom: 58px;
  }

  .alfa-mci-content-grid {
    padding-left: 22px;
    padding-right: 22px;
  }

  .alfa-mci-title-main {
    font-size: clamp(34px, 14vw, 58px);
  }

  .alfa-mci-benefits h2 {
    font-size: 36px;
  }
}