/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Flatten Webflow's slot wrapper so each slotted card code-island becomes a
 * direct grid/flex child of the cards container.
 * PROJECT RULE: the selector MUST be UNPREFIXED. */
::slotted(*) {
  display: contents !important;
}

/**
 * PersonalizedService (Old) — semantic port of the creditas-site section.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.personalized-service-old`, with layout-variant rules flat top-level. The
 * section title/description are NOT scoped to `.info` (the `channels` layout
 * renders them directly in `.container`), so the card renames its own to
 * `card-*` (see PersonalizedServiceCardOld.css) to avoid the clash.
 *
 * Variant modifiers: --sidebar | --column | --quotes | --channels
 * Background: --white | --gray | --dark · Cards: --cards-grid|-stack|-row
 * Plus --bold-title.
 */

.personalized-service-old,
.personalized-service-old *,
.personalized-service-old *::before,
.personalized-service-old *::after {
  box-sizing: border-box;
}

.personalized-service-old {
  display: block;

  &.white {
    background-color: #ffffff; /* neutral.0 */
  }
  &.gray {
    background-color: #f1f3f2; /* neutral.10 */
  }
  &.dark {
    background-color: #292929; /* neutral.90 */
  }

  /* Container (components/Container + overrides). */
  .container {
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(1388px + 40px);
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 20px;
    padding-bottom: 64px;

    @media (min-width: 320px) {
      padding-left: 20px;
      padding-right: 20px;
    }
    @media (max-width: 599px) {
      padding-right: 48px;
    }
    @media (min-width: 1024px) {
      padding-top: 96px;
      padding-bottom: 96px;
    }
  }

  /* Grid — 4/8/12 columns with per-variant template areas. */
  .grid {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      'info info info info'
      'cards cards cards cards';

    @media (min-width: 600px) {
      grid-column-gap: 36px;
      grid-template-columns: repeat(8, 1fr);
    }
    @media (min-width: 1024px) {
      grid-column-gap: 24px;
      grid-template-columns: repeat(12, 1fr);
    }
  }

  /* Info (InfoContainer). */
  .info {
    grid-area: info;
    margin-bottom: 24px; /* spacingBottom.6xl */
  }

  /* Title (RichText: headingMdLight -> headingXlLight at 5xl). */
  .title {
    margin: 0;
    font-family: 'Maison Neue Extended', 'Maisonneueextended', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.5px;
    color: #292929; /* neutral.90 */

    @media (min-width: 1024px) {
      font-size: 40px;
      line-height: 52px;
    }
  }

  /* Description (Typography: bodyMdLight -> bodyXlLight at 5xl). */
  .description {
    margin: 0;
    margin-top: 24px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    color: #3b4540; /* neutral.80 */

    @media (min-width: 1024px) {
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 0.5px;
    }
  }

  /* Dark background forces white title/description. */
  &.dark .title,
  &.dark .description {
    color: #ffffff; /* neutral.0 */
  }

  /* Cards container. */
  .cards {
    grid-area: cards;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Footer note — live .css-1lkvkia (neutral.60, 14/20; supports <b>/<br>). */
  .note {
    color: #52605a; /* neutral.60 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
  }
}

/* ---------- Sidebar (Template01): info | cards split ---------------- */

@media (min-width: 600px) {
  .personalized-service-old.sidebar .grid {
    grid-template-areas: 'info info info info cards cards cards cards';
  }
}
@media (min-width: 1024px) {
  .personalized-service-old.sidebar .grid {
    grid-template-areas: '. info info info info info . cards cards cards cards .';
  }
}

.personalized-service-old.sidebar .cards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  gap: 24px;
}

/* ---------- Column (Template02): centered info over cards ----------- */

@media (min-width: 600px) {
  .personalized-service-old.column .grid {
    grid-template-areas:
      '. info info info info info info .'
      '. cards cards cards cards cards cards .';
  }
}
@media (min-width: 1024px) {
  .personalized-service-old.column .grid {
    grid-template-areas:
      '. . . info info info info info info . . .'
      'cards cards cards cards cards cards cards cards cards cards cards cards';
  }
}

.personalized-service-old.column .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}
@media (min-width: 600px) {
  .personalized-service-old.column .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .personalized-service-old.column .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
  }
}

/* ---------- Info centering (column + quotes) ----------------------- */

@media (min-width: 600px) {
  .personalized-service-old.column .info,
  .personalized-service-old.quotes .info {
    text-align: center;
  }
}
.personalized-service-old.quotes .info {
  max-width: 496px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Quotes cards: wrapping flex row ------------------------ */

.personalized-service-old.quotes .cards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
}
.personalized-service-old.quotes .cards > * {
  flex: 1 1 236px;
}
@media (max-width: 767px) {
  .personalized-service-old.quotes .cards {
    flex-direction: column;
  }
}

/* ---------- Cards-layout overrides (stack / row) ------------------- */

.personalized-service-old.cards-stack .cards {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}
.personalized-service-old.cards-row .cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: none;
}
.personalized-service-old.cards-row .cards > * {
  flex: 1 1 220px;
}

/* ---------- Channels layout (live canais-de-atendimento) ---------- */

.personalized-service-old.channels .container {
  max-width: 1428px;
  padding-top: 64px;
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .personalized-service-old.channels .container {
    padding-top: 96px;
  }
}

.personalized-service-old.channels .title {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  font-size: 24px;
  line-height: 32px;
}
@media (min-width: 1024px) {
  .personalized-service-old.channels .title {
    font-size: 40px;
    line-height: 52px;
  }
}

.personalized-service-old.channels .description {
  margin-top: 32px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  color: #3b4540; /* neutral.80 */
}
@media (min-width: 1024px) {
  .personalized-service-old.channels .description {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
  }
}

.personalized-service-old.channels .cards {
  display: grid;
  column-gap: 16px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px) {
  .personalized-service-old.channels .cards {
    column-gap: 40px;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Bold-title modifier ------------------------------------ */
/* Live new-design title (Helvetica Now Display, bold 700). Sizes inherited
   from the base .title. Composable with any layout. */
.personalized-service-old.bold-title .title {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  font-weight: 700;
}