.cmp-circleTwoType--swapcolumn .cmp-circleTwoType__inner{
    display: flex;
    flex-direction: column-reverse;
  }

.cmp-circleTwoType--narrowstyle .cmp-circleTwoType__content {
  max-width: 100%;
  width: 100%;
}
.cmp-circleTwoType--narrowstyle .cmp-circleTwoType__cta {
  margin: unset;
}

.cmp-circleTwoType--smallicon .cmp-circleTwoType__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.795rem;
  padding: 1rem;
}

.cmp-circleTwoType .cmp-title {
  padding: unset;
}

.cmp-circleTwoType__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.cmp-circleTwoType__inner {
  display: grid;
  gap: var(--space-8);
  max-width: var(--especiales-max-width-desktop);
  padding: var(--space-8) 0px;
  margin-inline: auto;
  width: 100%;
}

.cmp-circleTwoType__media {
  width: var(--transparencia-image-size);
  justify-self: center;
}

.cmp-circleTwoType__media img {
  width: var(--transparencia-image-size);
  height: var(--transparencia-image-size);
  max-width: var(--transparencia-image-size);
  max-height: var(--transparencia-image-size);
  /* margin-bottom: var(--space-9); */
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
}

.cmp-circleTwoType__icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-20);
  background: var(--icon-bg-color);
  padding: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmp-circleTwoType__icon::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--icon-color);
  -webkit-mask: var(--icon-url) no-repeat center;
  -webkit-mask-size: contain;
  mask: var(--icon-url) no-repeat center;
  mask-size: contain;
}

.cmp-circleTwoType__icon-image {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 6rem;
}

.cmp-circleTwoType__title h3.cmp-title__text {
  /*margin-block: var(--space-4);*/
  color: var(--Neutros-900);
  font-family: var(--Heading-Mvil-H2-fontFamily);
  font-size: var(--Heading-Mvil-H2-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Heading-Mvil-H2-lineHeight);
  letter-spacing: var(--Heading-Mvil-H2-letterSpacing);
}
.cmp-circleTwoType__title h2.cmp-title__text {
  font-family: var(--Heading-Escritorio-H3-fontFamily);
  font-size: clamp(1.75rem, 2.1vw, var(--Heading-Escritorio-H3-fontSize));
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: clamp(2.25rem, 2.6vw, var(--Heading-Escritorio-H3-lineHeight));
  letter-spacing: var(--Heading-Escritorio-H3-letterSpacing);
}

.cmp-circleTwoType__description, 
.cmp-circleTwoType__description p{
  color: var(--Colors-Others-Color-Gray-700);
  font-family: var(--Subheading-Escritorio-M-fontFamily);
  font-size: var(--Subheading-Escritorio-M-fontSize);
  font-style: normal;
  font-weight: var(--Weights-Regular);
  line-height: var(--Subheading-Escritorio-M-lineHeight);
  letter-spacing: var(--Subheading-Escritorio-M-letterSpacing);
}

.cmp-circleTwoType__cta {
  width: fit-content;
  display: flex;
  height: var(--estrategia-caf-cta-height);
  padding: 0 var(--space-6);
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  /*margin-block: var(--space-6);*/
  border-radius: var(--especiales-cta-radius);
  background: var(--color-white);
}

.cmp-circleTwoType__cta-green {
  color: #49a848;
  border: 0.0625rem solid #49a848;
}

.cmp-circleTwoType__cta-dark-green {
  border: var(--estrategia-caf-cta-border-width) solid var(--Secundario-700);
  color: var(--Secundario-700);
}

.cmp-circleTwoType__cta-darker-green {
  border: var(--estrategia-caf-cta-border-width) solid var(--Secundario-800);
  color: var(--Secundario-800);
}

.cmp-circleTwoType__cta-dark-blue {
  border: var(--estrategia-caf-cta-border-width) solid var(--Primario-900);
  color: var(--Primario-900);
}

.cmp-circleTwoType__cta-blue {
  border: var(--estrategia-caf-cta-border-width) solid var(--Primario-500-Marca);
  color: var(--Primario-500-Marca);
}

.cmp-circleTwoType__cta:focus-visible {
  outline: 0.125rem solid var(--color-brand-turquoise-500);
  outline-offset: 0.125rem;
}

@media (max-width: 63.9375rem) {
  .cmp-circleTwoType__media {
    /* margin-inline: auto; */
    width: 100%;
    margin: 0 auto;
  }
  .cmp-circleTwoType__media img {
    height: auto;
    margin: 0 auto;
    width: 80%;
    aspect-ratio: 1 / 1;
  }
}
@media (min-width: 64rem) {
  .cmp-circleTwoType__inner {
    grid-template-columns: 49.5% minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-12);
  }
  .cmp-circleTwoType--swapcolumn .cmp-circleTwoType__inner{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    max-width: var(--especiales-max-width-desktop);
    padding: var(--space-8) 0px;
    margin-inline: auto;
    width: 100%;
  }

  .cmp-circleTwoType--narrowstyle .cmp-circleTwoType__inner {
    /* width: fit-content;
    max-width: 100%; */
    /*margin: 0 auto;
    display: flex;
    gap: clamp(2.5rem, 7vw, 9.375rem);
    align-items: center;
    justify-content: center;*/
    max-width: 90rem;
    padding-inline-end: min(7.5rem, 10%);
  }

  .cmp-circleTwoType--narrowstyle .cmp-circleTwoType__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: clamp(20rem, 38vw, 37.5rem);
  }

  .cmp-circleTwoType__cta {
    font-family: var(--Label-Label-1-fontFamily);
    font-size: var(--Label-Label-1-fontSize);
    font-style: normal;
    font-weight: var(--Weights-Bold);
    line-height: var(--Label-Label-1-lineHeight);
    letter-spacing: var(--Label-Label-1-letterSpacing);
  }
}

.cq-placeholder.cmp-text {
  height: 2.875rem;
  width: 15rem;
}

/* --------------------------------- */
/* --- Style system - Left align --- */
/* --------------------------------- */

@media (min-width: 64rem) {
  .cmp-circleTwoType--leftalign .cmp-circleTwoType__inner {
    width: auto;
    justify-content: flex-end;

    max-width: 1440px;
    margin-inline: auto;
  }
}

/* --------------------------------- */
/* --- Style system - CTA Button --- */
/* --------------------------------- */

@media (width < 64rem) {
  .cmp-circleTwoType--buttonwide .cmp-circleTwoType__cta,
  .cmp-circleTwoType--buttonwide-noarrow .cmp-circleTwoType__cta {
    font-family: var(--Label-Label-1-fontFamily);
    font-size: var(--Label-Label-1-fontSize);
    font-style: normal;
    font-weight: var(--Weights-Bold);
    line-height: var(--Label-Label-1-lineHeight);
    letter-spacing: var(--Label-Label-1-letterSpacing);
    width: 100%;
  }

  .cmp-circleTwoType--buttonwide-noarrow .cmp-circleTwoType__cta img {
    display: none;    
  }
}