.cmp-tabs--theme-green .cmp-tabs-sectores__tab.cmp-tabs__tab--active{
  background: var(--Secundario-secundario-800, #285c28);
  color: var(--BN-white, #fdfdfd);
}

.cmp-tabs--theme-blue .cmp-tabs-sectores__tab.cmp-tabs__tab--active {
  background: var(--Primario-primario-700, #003a61) !important;
  color: var(--BN-white, #fdfdfd);
}
.cmp-tabs-sectores__select-icon{
  display: block;
  position: absolute;
  inset: 50% auto auto var(--space-4);
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--Primario-500-Marca, #005288);
  display: inline-grid;
  place-items: center;
}

.cmp-filteredTabs__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: var(--space-2);
  border: 1px solid var(--Neutros-600, #7c7f83);
  background: var(--BN-white, #fdfdfd);
  color: var(--Colors-Primary-Slate-900, #1c222b);
  font-family: var(--Subheading-Escritorio-XL-fontFamily);
  font-size: var(--Subheading-Escritorio-XL-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Subheading-Escritorio-XL-lineHeight);
  letter-spacing: var(--Subheading-Escritorio-XL-letterSpacing);
  padding: var(--space-3) 3rem var(--space-3) 4.25rem;
  appearance: none;
  background-image: url("../../../../etc.clientlibs/caf/clientlibs/clientlib-site/resources/images/svg/chevron_backward_24.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.cmp-tabs-sectores__row {
  display: none;
  flex-direction: column;
  width: 100%;
  z-index: 10;
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.cmp-tabs-sectores__row[aria-hidden="false"] {
  display: flex;
}

.cmp-tabs-sectores {
  max-width: var(--especiales-max-width-desktop);
  margin-inline: auto;
  padding: 0 var(--space-4) var(--space-6);
  position: relative; 
}

.cmp-tabs-sectores__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.cmp-tabs-sectores__mobile {
  display: grid;
  gap: var(--space-2);
}

.cmp-tabs-sectores__select-label {
  color: var(--Neutros-800, #343537);
  font-family: var(--Body-Body-2-fontFamily);
  font-size: var(--Body-Body-2-fontSize);
  font-style: normal;
  font-weight: var(--Weights-Regular);
  line-height: var(--Body-Body-2-lineHeight);
  letter-spacing: var(--Body-Body-2-letterSpacing);
}

.cmp-tabs-sectores__select-wrap {
  position: relative;
}

.cmp-tabs-sectores__tab-icon {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-image: var(--tab-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--tab-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  flex: 0 0 1rem;
}

.cmp-tabsIconColor__wide-buttons .cmp-tabs-sectores__tab-icon {
  margin: 8px;
}

.cmp-tabs-sectores__divider {
  margin-top: var(--space-5);
  height: 1px;
  width: 100%;
  background: var(--Neutros-300, #dddedf);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.cmp-tabsIconColor__hide-button-border .cmp-tabs-sectores__divider {
  display: none;
}


.cmp-tabs--theme-green .cmp-tabs-sectores__select-icon{
  background: var(--Secundario-secundario-800, #285c28);
}

.cmp-tabs--theme-blue .cmp-tabs-sectores__select-icon{
  background: var(--Primario-500-Marca, #005288);
}

.cmp-tabs-sectores__select-icon {
  display: block;
  position: absolute;
  inset: 50% auto auto var(--space-4);
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}

.cmp-tabs-sectores__select-icon::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: var(--BN-white, #fdfdfd);
  -webkit-mask-image: var(--tab-icon, url("../../../../etc.clientlibs/caf/clientlibs/clientlib-site/resources/images/svg/topic/water.svg"));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--tab-icon, url("../../../../etc.clientlibs/caf/clientlibs/clientlib-site/resources/images/svg/topic/water.svg"));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.cmp-tabs-sectores__select {
  width: 100%;
  border-radius: var(--space-2);
  border: 1px solid var(--Neutros-600, #7c7f83);
  background: var(--BN-white, #fdfdfd);
  color: var(--Colors-Primary-Slate-900, #1c222b);
  font-family: var(--Subheading-Escritorio-XL-fontFamily);
  font-size: var(--Subheading-Escritorio-XL-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Subheading-Escritorio-XL-lineHeight);
  letter-spacing: var(--Subheading-Escritorio-XL-letterSpacing);
  padding: var(--space-3) 3rem var(--space-3) 4.25rem;
  appearance: none;
  background-image: url("../../../../etc.clientlibs/caf/clientlibs/clientlib-site/resources/images/svg/chevron_backward_24.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.cmp-tabs-sectores__desktop {
  display: none;
}

.cmp-tabs-sectores__tab.is-active {
  background: var(--Primario-primario-700, #003a61);
  color: var(--BN-white, #fdfdfd);
}

@media (min-width: 64rem) {
  .cmp-tabs-sectores {
    padding-bottom: var(--space-7);
  }

  .cmp-tabs-sectores__select-label {
    display: none;
  }

  .cmp-filteredTabs__dropdown-trigger {
    display: none !important;
  }

  .cmp-tabs-sectores__mobile {
    display: none;
  }

  .cmp-tabs-sectores__desktop {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
    display: grid;
    gap: var(--space-2);
    width: fit-content;
    margin-inline: auto;
    justify-content: start;
  }

  .cmp-tabs-sectores__row {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row;
    position: static;
    border: none;
    background: transparent;
    gap: 0.375rem;
  }
  

  .cmp-tabs-sectores__tab {
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.15rem;
  }
  
  .cmp-tabs-sectores__select-icon {
    display: none;
  }
  .cmp-tabs--theme-green .cmp-tabs-sectores__tab {
    background: var(--Secundario-secundario-50, #edf6ed);
    color: var(--Neutros-Grey-900, #1e1f21);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    border: 0;
    border-radius: 1rem;
    font-family: var(--Subheading-Escritorio-XL-fontFamily);
    font-size: var(--Subheading-Escritorio-XL-fontSize);
    font-style: normal;
    font-weight: var(--Weights-SemiBold);
    line-height: var(--Subheading-Escritorio-XL-lineHeight);
    letter-spacing: var(--Subheading-Escritorio-XL-letterSpacing);
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .cmp-tabs--theme-blue .cmp-tabs-sectores__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    border: 0;
    border-radius: 1rem;
    background: var(--Primario-50, #e6eef3);
    color: #002239;
    font-family: var(--Subheading-Escritorio-XL-fontFamily);
    font-size: var(--Subheading-Escritorio-XL-fontSize);
    font-style: normal;
    font-weight: var(--Weights-SemiBold);
    line-height: var(--Subheading-Escritorio-XL-lineHeight);
    letter-spacing: var(--Subheading-Escritorio-XL-letterSpacing);
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
  }
}

@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .cmp-tabs-sectores__desktop {
    max-width: 800px;
    width: 100%;
  }
  .cmp-tabs-sectores__row {
    gap: 0.375rem;
  }
  .cmp-tabs-sectores__tab {
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    line-height: 1.15rem;
  }
  .cmp-tabs-sectores__tab-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-basis: 0.875rem;
  }
}
/* --------------------------------- */
/* --- Style system - Left align --- */
/* --------------------------------- */

@media (min-width: 64rem) {
  .cmp-tabsIconColor__left-align .cmp-tabs-sectores {
    max-width: none;
    padding: 0 clamp(var(--space-6), 6vw, var(--space-14)) var(--space-6);
  }

  .cmp-tabsIconColor__left-align .cmp-tabs-sectores__desktop {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
  }

  .cmp-tabsIconColor__left-align .cmp-tabs-sectores__row {
    max-width: 1440px;
  }
}

/* --------------------------------- */
/* ------ Style system - Grid ------ */
/* --------------------------------- */

.cmp-tabsIconColor__grid {
  --tabs-icon-color-grid-column-gap: 0.875rem;
  --tabs-icon-color-grid-row-gap: var(--space-9);
  --tabs-icon-color-grid-row-gap-mobile: var(--tabs-icon-color-grid-column-gap);
  --tabs-icon-color-grid-padding: var(--space-5) 0;
  --tabs-icon-color-grid-padding-mobile: var(--space-6) 0;
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores {
  padding: 0 clamp(var(--space-6), 6vw, var(--space-14));
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores__mobile {
  display: none;
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores__desktop {
  display: block;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  container-type: inline-size;
  container-name: tabs-icon-grid;
}

.cmp-tabsIconColor__left-align.cmp-tabsIconColor__grid .cmp-tabs-sectores__desktop {
  max-width: 1440px;
  margin-inline: auto;
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores__row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  column-gap: var(--tabs-icon-color-grid-column-gap);
  row-gap: var(--tabs-icon-color-grid-row-gap-mobile);
  width: 100%;
  padding: var(--tabs-icon-color-grid-padding-mobile);
  border: 0;
  background: transparent;
  align-items: stretch;
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab,
.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  width: 100%;
  height: 100%;
  min-width: 0;
  flex: none;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  white-space: normal;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--Subheading-Escritorio-XL-fontFamily);
  font-size: var(--Subheading-Escritorio-XL-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Subheading-Escritorio-XL-lineHeight);
  letter-spacing: var(--Subheading-Escritorio-XL-letterSpacing);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab {
  background: var(--Celeste-50);
  color: var(--Primario-900);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab {
  background: var(--Secundario-50);
  color: var(--Secundario-900);
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores__tab-icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  margin: 0;
  border-radius: var(--radius-20);
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab-icon {
  background-color: var(--Turquesa-100);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab-icon {
  background-color: var(--color-aprende-filter);
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores__tab-icon::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  -webkit-mask-image: var(--tab-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--tab-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.cmp-tabsIconColor__grid .cmp-tabs-sectores__tab-label {
  min-width: 0;
  font-family: var(--Heading-Mvil-H4-fontFamily);
  font-size: var(--Heading-Mvil-H4-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Heading-Mvil-H4-lineHeight);
  letter-spacing: var(--Heading-Mvil-H4-letterSpacing);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab-label {
  color: var(--color-celeste-900);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab-label {
  color: var(--Secundario-900);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab.cmp-tabs__tab--active,
.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab:focus-visible {
  background: var(--Primario-700) !important;
  color: var(--BN-white);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab.cmp-tabs__tab--active,
.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab:focus-visible {
  background: var(--Satisfaccin-green-800);
  color: var(--BN-white);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab.cmp-tabs__tab--active .cmp-tabs-sectores__tab-icon,
.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab:focus-visible .cmp-tabs-sectores__tab-icon,
.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab.cmp-tabs__tab--active .cmp-tabs-sectores__tab-icon,
.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab:focus-visible .cmp-tabs-sectores__tab-icon {
  background-color: var(--BN-white);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab.cmp-tabs__tab--active .cmp-tabs-sectores__tab-icon::before,
.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab:focus-visible .cmp-tabs-sectores__tab-icon::before {
  background-color: var(--Primario-700);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab.cmp-tabs__tab--active .cmp-tabs-sectores__tab-icon::before,
.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab:focus-visible .cmp-tabs-sectores__tab-icon::before {
  background-color: var(--Satisfaccin-green-800);
}

.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab.cmp-tabs__tab--active .cmp-tabs-sectores__tab-label,
.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab.cmp-tabs__tab--active .cmp-tabs-sectores__tab-label,
.cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab:focus-visible .cmp-tabs-sectores__tab-label,
.cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab:focus-visible .cmp-tabs-sectores__tab-label {
  color: var(--BN-white);
}

@container tabs-icon-grid (min-width: 28.875rem) {
  .cmp-tabsIconColor__grid .cmp-tabs--theme-blue .cmp-tabs-sectores__tab,
  .cmp-tabsIconColor__grid .cmp-tabs--theme-green .cmp-tabs-sectores__tab {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (min-width: 64rem) {
  .cmp-tabsIconColor__grid .cmp-tabs-sectores {
    max-width: unset;
  }

  .cmp-tabsIconColor__grid .cmp-tabs-sectores__desktop {
    max-width: var(--especiales-max-width-desktop);
    margin-inline: auto;
  }
  
  .cmp-tabsIconColor__grid .cmp-tabs-sectores__row {
    padding: var(--tabs-icon-color-grid-padding);
    row-gap: var(--tabs-icon-color-grid-row-gap);
  }

  .cmp-tabsIconColor__grid .cmp-tabs-sectores__tab {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .cmp-tabsIconColor__grid .cmp-tabs-sectores__tab-label {
    font-size: var(--Heading-Escritorio-H5-fontSize);
    line-height: var(--Heading-Escritorio-H5-lineHeight);
    letter-spacing: var(--Heading-Escritorio-H5-letterSpacing);
    font-weight: var(--Weights-SemiBold);
  }
}

/* --------------------------------- */
/* -- Style system - Wide Padding -- */
/* --------------------------------- */

.cmp-tabsIconColor__wide-padding .cmp-tabs-sectores {
  padding-block: var(--space-9);
}

/* --------------------------------- */
/* ------ Style - Inside a tab ----- */
/* --------------------------------- */
.section-shell .cmp-tabs-sectores.section-shell {
  padding-inline: 0;
}
