body {
  margin: 0;
  line-height: normal;
}

@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Sura Sans";
  src: url("./fonts/OTF/SuraSans-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* Fonts */
  --sura-caption-regular: "Sura Sans";

  /* font sizes */
  --sura-caption-regular-size: 14px;
  --sura-body-negrita-size: 16px;
  --sura-s1-regular-size: 20px;
  --sura-h4-negrita-size: 24px;
  --sura-h3-negrita-size: 28px;
  --sura-h2-negrita-size: 36px;
  --sura-h1-negrita-size: 42px;
  --font-size-37xl: 56px;

  /* Colors */
  --color-dimgray: #53565a;
  --color-gainsboro-100: #d9e1e9;
  --color-gray-100: #1e1e1e;
  --color-silver-100: #b7c9d3;
  --color-silver-200: #bbb;
  --color-silver-300: rgba(164, 188, 194, 0.1);
  --color-silver-400: rgba(183, 201, 211, 0.2);
  --color-skyblue-100: #4cc6e5;

  /* Gaps */
  --gap-0: 0px;
  --gap-9xs: 4px;
  --gap-5xs: 8px;
  --gap-3xs: 10px;
  --gap-base: 16px;
  --gap-5xl: 24px;

  /* Paddings */
  --padding-9xs: 4px;
  --padding-5xs: 8px;
  --padding-xs: 12px;
  --padding-smi: 13px;
  --padding-base: 16px;
  --padding-lg: 18px;
  --padding-5xl: 24px;
  --padding-13xl: 32px;
  --padding-51xl: 70px;
  --padding-141xl: 160px;
  --padding-157xl: 176px;

  /* Border radiuses */
  --br-9xs: 4px;
  --br-5xs: 8px;
  --br-base: 16px;
  --br-xl: 20px;
  --br-16xl: 35px;

  /* Effects */
  --sura-dp-1: 1px 2px 4px rgba(29, 66, 138, 0.16);

  /* Figma Variables */

  /* Color Variables */
  --paleta-complementaria-azul-profundo: #0033a0;
  --paleta-principal-blanco-todo-puede-pasar: #fff;
  --sura-primary-aqua-sura: #00aec7;
  --sura-primary-azul-gs: #001e60;
  --sura-primary-gris-claro: #dae0e8;
  --sura-primary-gris-sam: #253746;
}

body {
  margin: 0;
  line-height: normal;
  font-family: var(--sura-caption-regular);
}

.general_container {
  max-width: 1120px !important;
  margin: 0 auto;
}

.copyright-grupo-sura {
  margin: 0;
}

.superintendencia-financiera-de {
  color: #4ec3e0;
}

.copyright-grupo-sura-container1 {
  width: 100%;
}

.copyright-grupo-sura-container {
  position: absolute;
  top: 276px;
  left: 160px;
  display: flex;
  align-items: center;
  width: 1120px;
}

.nuestras-compaas-sura {
  align-self: stretch;
  position: relative;
}

.frame-child {
  width: 230px;
  position: relative;
  max-height: 100%;
}

.nuestras-compaas-sura-parent {
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}

.iconos-redes-sociales-x {
  width: 40px;
  position: relative;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
}

.iconos-redes-sociales-x-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}

.frame-parent {
  position: absolute;
  top: 38px;
  left: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-141xl);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--sura-body-negrita-size);
}

.footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: var(--sura-primary-azul-gs);
  width: 100%;
  height: 352px;
  text-align: center;
}

.previa {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.iconos-flechasavant-derecha {
  width: 16px;
  position: relative;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.migas-de-pan {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
  color: var(--sura-primary-azul-gs);
}

.informe-de-gestin {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-line-small {
  width: 16px;
  position: relative;
  height: 16px;
  display: none;
}

.migas-de-pan1 {
  width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
  max-width: 300px;
  color: var(--sura-primary-azul-gs);
}

.migas-de-pan2 {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}

.actual {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.migas-de-pan3 {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-9xs);
  max-width: 145px;
}

.niveles-miga-de-pan {
  align-self: stretch;
  height: 34px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs);
  box-sizing: border-box;
  gap: var(--gap-5xs);
}

.miga-de-pan {
  position: absolute;
  top: 150px;
  left: 0px;
  box-shadow: 1px 2px 4px rgba(29, 66, 138, 0.16);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-9xs) var(--padding-141xl);
  box-sizing: border-box;
  color: var(--paleta-complementaria-azul-profundo);
}

.lnea-tica {
  position: absolute;
  top: 1px;
  left: 0px;
}

.certificado-de-renta1 {
  position: absolute;
  top: 1px;
  left: 107px;
}

.noticias {
  position: absolute;
  top: 1px;
  left: 280px;
  cursor: pointer;
}

.contctanos {
  position: absolute;
  top: 1px;
  left: 370px;
}

.menu {
  width: 461px;
  position: relative;
  height: 23px;
}

.header-sup {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: var(--sura-primary-azul-gs);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding-base) var(--padding-141xl);
  box-sizing: border-box;
  font-size: var(--sura-body-negrita-size);
}

.bg-sup {
  position: absolute;
  top: 2px;
  left: 0px;
  box-shadow: 1px 2px 4px rgba(29, 66, 138, 0.16);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 100%;
  height: 94px;
}

.gruposura-icon {
  width: 156px;
  position: relative;
  height: 80px;
  overflow: hidden;
  flex-shrink: 0;
}

.logo {
  position: absolute;
  top: 8px;
  left: 160px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.iconos-simplificados-lupa {
  width: 24px;
  position: relative;
  height: 24px;
}

.buscadorestados {
  position: absolute;
  top: 24px;
  left: 1232px;
  border-radius: 12px;
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  border: 1px solid var(--sura-primary-azul-gs);
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px var(--padding-9xs);
}

.quienes-somos {
  position: relative;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quienes-somos-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-5xs);
  min-width: 54px;
  max-width: 331px;
  min-height: 24px;
  max-height: 24px;
}

.botn-menu {
  border-radius: var(--br-xl);
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base) var(--padding-xs);
  box-sizing: border-box;
  min-width: 150px;
  max-width: 427px;
}

.iconosflechasavant-abajo1 {
  width: 16px;
  position: relative;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.quienes-somos-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-base);
  min-width: 54px;
  max-width: 331px;
  min-height: 24px;
  max-height: 24px;
}

.botn-menu1 {
  border-radius: var(--br-xl);
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base) var(--padding-xs);
  box-sizing: border-box;
  min-width: 136px;
  max-width: 427px;
}

.botn-menu-parent {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}

.menu1 {
  position: absolute;
  top: 28px;
  left: 323px;
  width: 902px;
  height: 40px;
}

.menu-ppl-cont {
  width: 100%;
  border-radius: var(--br-5xs);
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-base) var(--padding-xs);
  box-sizing: border-box;
  gap: var(--gap-0);
  min-width: 150px;
  max-width: 427px;
}

.dd-relacion-inversionistas {
  position: absolute;
  top: 72px;
  left: 627px;
  border-radius: 0px 0px var(--br-5xs) var(--br-5xs);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 266px;
  height: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-9xs) 0px;
  box-sizing: border-box;
  gap: var(--gap-5xl);
}

.dd-quines-somos {
  position: absolute;
  top: 72px;
  left: 323px;
  border-radius: 0px 0px var(--br-5xs) var(--br-5xs);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 266px;
  height: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-9xs) 0px;
  box-sizing: border-box;
  gap: var(--gap-5xl);
}

.dd-sostenibilidad {
  position: absolute;
  top: 74px;
  left: 1066px;
  border-radius: 0px 0px var(--br-5xs) var(--br-5xs);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 266px;
  height: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-9xs) 0px;
  box-sizing: border-box;
  gap: var(--gap-5xl);
}

.header-menu {
  position: absolute;
  top: 54px;
  left: 0px;
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 100%;
  height: 96px;
  text-align: center;
  font-size: var(--sura-body-negrita-size);
  color: var(--sura-primary-azul-gs);
}

.capa-1-icon {
  position: absolute;
  top: -694px;
  left: -637px;
  width: 1357px;
  height: 1357px;
  overflow: hidden;
}

.line-div {
  width: 319px;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  height: 1px;
}

.lorem-ipsum-dolor {
  align-self: stretch;
  position: relative;
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-align: start;
  margin-bottom: 15px;
}
.swiper-pagination-bullet {
  transition: all 0.3s ease !important;
  background: #cbcbcb !important;
  bottom: -7px !important;
  position: relative !important;
}
.swiper-pagination-bullet-active {
  background: #02adc6 !important;
  width: 20px !important;
  border-radius: 5px !important;
}

.swiper-button-next,
.swiper-button-prev {
  top: auto !important;
  bottom: -7px !important;
}
.swiper-button-next {
  right: 35% !important;
}
.swiper-button-prev {
  left: 35% !important;
}
.iconos-flechas-descarga {
  width: 24px;
  position: relative;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.botones {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 291px;
}

.botn-base2 {
  width: 246px;
  border-radius: var(--br-xl);
  background-color: var(--sura-primary-azul-gs);
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px 26px;
  box-sizing: border-box;
  min-width: 150px;
  max-width: 427px;
  text-align: center;
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}
.botn-base2 {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  /* sombra superior normal */
}

.botn-base2:active {
  transform: translateY(2px);
  /* se reduce la sombra para simular que se hunde */
}

.line-parent {
  position: absolute;
  top: 169px;
  left: calc(50% + 12px);
  width: 318px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-3xs);
}

.banner-child {
  position: absolute;
  top: 400px;
  left: 0px;
  width: 100%;
  height: 717px;
  overflow: hidden;
}

.group-icon {
  position: absolute;
  height: 100%;
  width: 22.3%;
  top: 0%;
  right: 77.7%;
  bottom: 0%;
  left: 0%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.group-icon1 {
  position: absolute;
  height: 26.81%;
  width: 72.43%;
  top: 32.98%;
  right: 0%;
  bottom: 40.21%;
  left: 27.57%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.layer-1 {
  position: absolute;
  top: 54px;
  left: 50%;
  width: 300px;
  height: 94px;
  overflow: hidden;
  margin-left: 14px;
}

.banner {
  align-self: stretch;
  position: relative;
  background-color: var(--color-gainsboro-100);
  height: 400px;
  overflow: hidden;
  flex-shrink: 0;
  font-size: var(--sura-body-negrita-size);
  color: var(--color-dimgray);
}

.frame-child1 {
  width: 418.3px;
  position: relative;
  height: 416px;
  object-fit: cover;
}

.lorem-ipsum-dolor1 {
  align-self: stretch;
  position: relative;
  line-height: 22px;
  font-weight: 600;
  display: inline-block;
  height: 136px;
  flex-shrink: 0;
  text-align: start;
}

.ellipse-div {
  width: 9px;
  position: relative;
  border-radius: 50%;
  background-color: #002156;
  height: 9px;
}

.frame-child2 {
  width: 9px;
  position: relative;
  border-radius: 50%;
  background-color: #034da1;
  height: 9px;
}

.frame-child3 {
  width: 9px;
  position: relative;
  border-radius: 50%;
  background-color: var(--color-skyblue-100);
  height: 9px;
}

.frame-child4 {
  width: 9px;
  position: relative;
  border-radius: 50%;
  background-color: #627596;
  height: 9px;
}

.ellipse-parent {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 96px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  box-sizing: border-box;
  gap: var(--gap-3xs);
}

.frame-wrapper {
  width: 15px;
  position: relative;
  height: 15px;
}

.ricardo-jaramillo-meja {
  flex: 1;
  position: relative;
  font-weight: 600;
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.ricardo-jaramillo-meja-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--sura-h4-negrita-size);
  color: var(--sura-primary-gris-sam);
}

.presidente-grupo {
  position: relative;
  color: var(--sura-primary-aqua-sura);
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.botones-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 305px;
  cursor: pointer;
}

.frame-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-base);
  min-width: 54px;
  min-height: 24px;
  max-height: 24px;
}

.botn-base21 {
  border-radius: var(--br-xl);
  background-color: var(--sura-primary-aqua-sura);
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base) var(--padding-lg);
  box-sizing: border-box;
  min-width: 150px;
  max-width: 427px;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}
.botn-base21 {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  /* sombra superior normal */
}

.botn-base21:active {
  transform: translateY(2px);
  /* se reduce la sombra para simular que se hunde */
}

.lorem-ipsum-dolor-sit-amet-co-parent {
  width: 550px;
  height: 307px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--gap-3xs);
  padding-left: 50px;
}

.group-parent {
  background-color: var(--color-silver-300);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-51xl) var(--padding-157xl);
  gap: 114px;
  font-size: var(--sura-s1-regular-size);
  color: var(--color-gray-100);
  flex-wrap: wrap;
  width: 100%;
}

.nuestras-principales-cifras {
  position: relative;
  line-height: var(--sura-h2-negrita-size);
}

.nuestras-principales-cifras-en-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.gestin-financiera {
  position: relative;
  line-height: 22px;
  font-weight: 600;
}

.gestin-financiera-wrapper {
  width: 244px;
  border-radius: var(--br-5xs);
  background-color: var(--sura-primary-gris-claro);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) var(--padding-13xl);
  box-sizing: border-box;
}

.huella-de-negocio-wrapper {
  width: 244px;
  border-radius: var(--br-9xs);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) 0px;
  box-sizing: border-box;
}

.frame-child5 {
  width: 0px;
  position: relative;
  height: 48px;
  object-fit: contain;
}

.compromiso-con-la {
  width: 214px;
  position: relative;
  line-height: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  flex-shrink: 0;
}

.sostenibilidad {
  align-self: stretch;
  flex: 1;
  position: relative;
  line-height: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sostenibilidad-wrapper {
  width: 244px;
  border-radius: var(--br-9xs);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) var(--padding-base);
  box-sizing: border-box;
}

.relacin-con-el {
  flex: 1;
  position: relative;
  line-height: 22px;
  font-weight: 600;
}

.frame-parent1 {
  width: 1006px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}

.frame-wrapper1 {
  align-self: stretch;
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  height: 64px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.ut-enim-ad-container {
  flex: 1;
  position: relative;
  line-height: 22px;
  font-weight: 600;
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  z-index: 0;
}

.iconosflechasavant-abajo5 {
  width: 16px;
  position: relative;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  z-index: 1;
}

.filtro-lateral-child {
  width: 0px;
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 24px);
  left: 0px;
  height: 48px;
  object-fit: contain;
  z-index: 2;
}

.filtro-lateral {
  align-self: stretch;
  border-radius: var(--br-5xs);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  position: relative;
  gap: var(--gap-base);
}

.ut-enim-ad {
  flex: 1;
  position: relative;
  line-height: var(--sura-h4-negrita-size);
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  z-index: 0;
}

.filtro-lateral-item {
  width: 0px;
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 24px);
  left: 0px;
  height: 48px;
  object-fit: contain;
  display: none;
  z-index: 1;
}

.filtro-lateral1 {
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  position: relative;
  gap: var(--gap-base);
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
}

.filtro-lateral1:hover {
  background-color: var(--sura-primary-gris-claro);
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.filtro-lateral1.seleccionado {
  background-color: var(--sura-primary-gris-claro);
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.subcategorias-mobile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-base);
  padding: var(--padding-base);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  border-radius: var(--br-5xs);
  margin-top: 1rem;
  max-width: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
}

.subcategorias-mobile .subcat-btn {
  flex: 0 1 240px;
  padding: var(--padding-smi) var(--padding-base);
  border: none;
  border-radius: var(--br-5xs);
  font-size: var(--sura-s1-regular-size);
  font-family: var(--sura-caption-regular);
  color: var(--sura-primary-azul-gs);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.subcategorias-mobile .subcat-btn:hover {
  background-color: var(--color-silver-100);
  transform: scale(1.02);
}

@media (min-width: 1200px) {
  .subcategorias-mobile {
    display: none !important;
  }
}

.iconos-flechasavant-arriba {
  width: 16px;
  position: relative;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  z-index: 2;
}

.filtro-lateral-parent {
  width: 358px;
  border-radius: 10px;
  background-color: var(--color-silver-300);
  height: 406px;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding-5xs);
  box-sizing: border-box;
  gap: var(--gap-base);
}

.span {
  font-size: var(--sura-s1-regular-size);
  font-weight: 800;
  font-family: var(--sura-caption-regular);
}

.billones {
  font-size: var(--sura-body-negrita-size);
  color: var(--color-silver-200);
}

.cop-372-billones-container {
  align-self: stretch;
  position: relative;
  display: inline-block;
  height: 35px;
  flex-shrink: 0;
}

.cop-372-billones-wrapper {
  position: absolute;
  top: 22px;
  left: 0px;
  width: 268px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--sura-primary-aqua-sura);
}

.ingresos-totales {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: var(--sura-s1-regular-size);
  display: inline-block;
  width: 268px;
  height: 26px;
}

.group-child {
  position: absolute;
  height: 100%;
  width: 91px;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-aqua-sura);
}
.mask-group-icon iframe {
  height: 247px;
}
.b {
  position: absolute;
  top: 3.33%;
  left: 32.94%;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconos-flechasflecha-arriba- {
  position: absolute;
  height: 53.33%;
  width: 17.65%;
  top: 20%;
  right: 70.59%;
  bottom: 26.67%;
  left: 11.76%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.rectangle-parent {
  position: absolute;
  height: 30%;
  width: 31.72%;
  top: 70%;
  right: 68.28%;
  bottom: 0%;
  left: 0%;
  font-size: var(--sura-body-negrita-size);
}

.frame-parent3 {
  position: absolute;
  top: 3px;
  left: 442px;
  width: 268px;
  height: 100px;
}

.cop-23-billones-wrapper {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 268px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--sura-primary-aqua-sura);
}

.rectangle-group {
  width: 85px;
  position: relative;
  height: 30px;
}

.group-wrapper {
  position: absolute;
  top: 67px;
  left: 0px;
  width: 268px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--sura-body-negrita-size);
}

.frame-parent4 {
  position: absolute;
  top: 135px;
  left: 442px;
  width: 268px;
  height: 97px;
}

.b2 {
  position: absolute;
  top: 3.33%;
  left: 30.43%;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconos-flechasflecha-arriba-2 {
  position: absolute;
  height: 53.33%;
  width: 16.3%;
  top: 20%;
  right: 72.83%;
  bottom: 26.67%;
  left: 10.87%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.rectangle-container {
  width: 92px;
  position: relative;
  height: 30px;
}

.group-frame {
  position: absolute;
  top: 67px;
  left: 0px;
  width: 268px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.cop-92-billones-container {
  position: absolute;
  top: 21px;
  left: 0px;
  display: inline-block;
  width: 268px;
  height: 35px;
  font-size: var(--sura-h2-negrita-size);
  color: var(--sura-primary-aqua-sura);
}

.frame-parent5 {
  position: absolute;
  top: 264px;
  left: 442px;
  width: 268px;
  height: 97px;
  font-size: var(--sura-body-negrita-size);
}

.rectangle-div {
  position: absolute;
  top: 4px;
  left: 1px;
  border-radius: var(--br-base);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 408px;
  height: 359px;
}

.recurso-22x-1 {
  position: absolute;
  top: 60px;
  left: 19px;
  width: 370.4px;
  height: fit-content;
  object-fit: cover;
}

.evolucin-utilidad-neta {
  position: absolute;
  top: 25px;
  left: 19px;
  font-size: var(--sura-s1-regular-size);
  display: inline-block;
  color: var(--color-gray-100);
  width: 313px;
  height: 26px;
}

.group-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.frame-wrapper2 {
  width: 66%;
  position: relative;
  border-radius: var(--br-5xs);
  background-color: #001a5a;
  height: 100%;
  min-height: 406px;
  overflow-y: unset;
  flex-shrink: 0;
  font-size: var(--sura-h2-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
  padding-bottom: 15px !important;
  padding: 20px;
}
.frame-parent1 div {
  cursor: pointer;
}
.frame-parent2 {
  align-self: stretch;
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  text-align: left;
  margin-bottom: 30px;
}

.group-div {
  width: 1120px;
  /* height: 499px; */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  text-align: center;
  font-size: var(--sura-s1-regular-size);
}

.frame-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-51xl) var(--padding-157xl);
  gap: 47px;
}

.nuestro-portafolio-focalizado-container {
  position: absolute;
  top: 30px;
  left: 0px;
  line-height: var(--sura-h1-negrita-size);
  display: flex;
  align-items: center;
  width: 724px;
}

.texto-banner {
  position: absolute;
  top: 32px;
  left: 160px;
  width: 1120px;
  height: 135px;
  font-size: var(--sura-h1-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.torta-icon {
  position: absolute;
  height: 100%;
  width: 99.6%;
  top: 0%;
  right: 0.4%;
  bottom: 0%;
  left: 0%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}

.b3 {
  position: absolute;
  top: 0%;
  left: 0%;
  line-height: var(--sura-h3-negrita-size);
  display: -webkit-inline-box;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 97px;
}

.porcentaje {
  position: absolute;
  top: calc(50% + 7px);
  left: calc(50% - 10.5px);
  width: 97px;
  height: 64px;
}

.graphic-torta {
  position: absolute;
  top: -59px;
  left: 0px;
  width: 553px;
  height: 550px;
}

.graphic-torta-wrapper {
  position: absolute;
  top: 7px;
  left: 0px;
  width: 540px;
  height: 422px;
}

.banner-inner {
  position: absolute;
  top: 167px;
  left: 160px;
  width: 510px;
  height: 429px;
  z-index: 2;
}

.dividendos-recibidos-por {
  position: absolute;
  top: 603px;
  left: 277px;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
  text-align: center;
  display: -webkit-inline-box;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 320px;
}
/* .layer-1-icon1 {
  position: absolute;
  top: 101px;
  left: 1069px;
  width: 964.2px;
  height: 964.2px;
  overflow: hidden;
} */

.torta-icon1 {
  position: absolute;
  height: 100%;
  width: 99.59%;
  top: 0%;
  right: 0.41%;
  bottom: 0%;
  left: 0%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}

.swiper-button-prev {
  background-image: url("FlechasIzq.png"); /* o .png */
  background-repeat: no-repeat;
  background-position: center;
  /* background-size: contain; */
  width: 7% !important;
  /* height: 40px; */
}

/* Ocultar el ícono por defecto de Swiper */
.swiper-button-prev::after {
  display: none;
}

.swiper-button-next {
  background-image: url("FlechasDer.png"); /* o .png */
  background-repeat: no-repeat;
  background-position: center;
  /* background-size: contain; */
  width: 7% !important;
  /* height: 40px; */
}

/* Ocultar el ícono por defecto de Swiper */
.swiper-button-next::after {
  display: none;
}

.porcentaje1 {
  position: absolute;
  top: calc(50% + -0.5px);
  left: calc(50% - 34px);
  width: 97px;
  height: 64px;
}

.graphic-torta1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 196px;
  height: 195px;
}

.graphic-torta-container {
  position: absolute;
  top: 0px;
  left: 62px;
  width: 196px;
  height: 195px;
}

.dividendos-recibidos-por1 {
  position: absolute;
  top: 173px;
  left: 0px;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
  text-align: center;
  display: -webkit-inline-box;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 320px;
}

.frame-parent6 {
  position: absolute;
  top: 197px;
  left: 670px;
  width: 320px;
  height: 247px;
  z-index: 2;
}

.dividendos-recibidos-por2 {
  position: absolute;
  top: 165px;
  left: 0px;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
  text-align: center;
  display: -webkit-inline-box;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 320px;
}

.frame-parent7 {
  position: absolute;
  top: 440px;
  left: 670px;
  width: 320px;
  height: 247px;
  z-index: 2;
}

.layer-1-icon {
  position: absolute;
  left: 41%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.banner1 {
  align-self: stretch;
  position: relative;
  background-color: var(--sura-primary-azul-gs);
  height: 75vh;
  overflow: hidden;
  flex-shrink: 0;
  font-size: var(--sura-h3-negrita-size);
  color: var(--paleta-complementaria-azul-profundo);
}

.hitos-del-2024-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.div {
  width: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.wrapper {
  width: 72px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.filtro-aos-child {
  flex: 1;
  position: relative;
  background-color: var(--sura-primary-gris-claro);
  height: 8px;
}

.marzo {
  width: 57px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.abril {
  width: 52px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.mayo {
  width: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.junio {
  width: 73px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.junio-wrapper {
  width: 72px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.agosto {
  width: 65px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.agosto-wrapper {
  width: 92px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.septiembre {
  width: 94px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.septiembre-wrapper {
  width: 112px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.octubre {
  width: 84px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}

.octubre-wrapper {
  width: 124px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}
.noviembre-wrapper {
  width: 124px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 37px;
  box-sizing: border-box;
}
.noviembre-wrapper.activo {
  background-color: var(--sura-primary-azul-gs);
  color: white;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.noviembre-wrapper.activo div {
  color: white;
}

.diciembre-wrapper {
  width: 124px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 37px;
  box-sizing: border-box;
}

.filtro-aos1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  display: inline-flex;
  gap: 12px;
}

.febrero {
  position: relative;
}

.febrero-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-gris-claro);
  width: 71px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
  color: var(--sura-primary-azul-gs);
}

.aos-child {
  position: absolute;
  top: 23px;
  left: 72px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.abril-container {
  position: absolute;
  top: 0px;
  left: 131px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-item {
  position: absolute;
  top: 23px;
  left: 203px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.container {
  position: absolute;
  top: 0px;
  left: 262px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-inner {
  position: absolute;
  top: 23px;
  left: 334px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.frame {
  position: absolute;
  top: 0px;
  left: 393px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-child1 {
  position: absolute;
  top: 23px;
  left: 465px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.wrapper1 {
  position: absolute;
  top: 0px;
  left: 524px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-child2 {
  position: absolute;
  top: 23px;
  left: 596px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.wrapper2 {
  position: absolute;
  top: 0px;
  left: 655px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-child3 {
  position: absolute;
  top: 23px;
  left: 727px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.wrapper3 {
  position: absolute;
  top: 0px;
  left: 786px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-child4 {
  position: absolute;
  top: 23px;
  left: 858px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.wrapper4 {
  position: absolute;
  top: 0px;
  left: 917px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos-child5 {
  position: absolute;
  top: 23px;
  left: 989px;
  background-color: var(--sura-primary-azul-gs);
  width: 59px;
  height: 8px;
}

.wrapper5 {
  position: absolute;
  top: 0px;
  left: 1048px;
  border-radius: var(--br-16xl);
  background-color: var(--sura-primary-azul-gs);
  width: 72px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base);
  box-sizing: border-box;
}

.aos {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1120px;
  height: 54px;
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.filtro-aos {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #011e5d #f1f1f1;
}
.filtro-aos::-webkit-scrollbar {
  height: 8px !important;
}
.title-lorem {
  color: #56c0e7;
  text-align: left;
  position: relative;
  top: 0;
  font-size: 16px;
}
.group-child1 {
  position: absolute;
  top: 86px;
  left: 55px;
  width: 967px;
  height: 1px;
}

.iconos-flechasavant-izquierd {
  position: absolute;
  top: 5px;
  left: 0px;
  width: 44px;
  height: 44px;
  overflow: hidden;
}

.iconos-flechasavant-derecha16 {
  position: absolute;
  top: 5px;
  left: 1067px;
  width: 44px;
  height: 44px;
  overflow: hidden;
}

.filtro-aos-parent {
  position: absolute;
  top: 83px;
  left: 0;
  width: 100%;
  height: 87px;
  text-align: center;
  font-size: var(--sura-body-negrita-size);
}

.frame-parent8 {
  width: 100%;
  max-width: 1120px;
  position: relative;
  height: 170px;
  z-index: 0;
  text-align: left;
  font-size: var(--sura-h2-negrita-size);
  color: var(--sura-primary-azul-gs);
}

.contenedor-mes {
  width: 100%;
  max-width: 1120px;
  position: relative;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-azul-gs);
  height: fit-content;
  z-index: 1;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.eleccin-de-juan {
  width: calc(100% / 3 - 12px);
  position: relative;
  margin: 0 !important;
  top: 0;
  left: 0;
  line-height: 22px;
  font-weight: 600;
  display: block;
  z-index: 2;
  padding: 20px;
  background: #fff;
  border-radius: 13px;
  color: #1e1e1e;
  text-align: left;
}

.sura-entre-las {
  width: calc(100% / 3 - 12px);
  position: relative;
  margin: 0 !important;
  top: 0;
  left: 0;
  line-height: 22px;
  font-weight: 600;
  display: block;
  z-index: 2;
  padding: 20px;
  background: #fff;
  border-radius: 13px;
  color: #1e1e1e;
  text-align: left;
}

.cultura-latinoamrica {
  width: calc(100% / 3 - 12px);
  position: relative;
  margin: 0 !important;
  top: 0;
  left: 0;
  line-height: 22px;
  font-weight: 600;
  display: block;
  z-index: 2;
  padding: 20px;
  background: #fff;
  border-radius: 13px;
  color: #1e1e1e;
  text-align: left;
}

.junio1 {
  width: 100%;
  position: relative;
  margin: 0 !important;
  top: 0;
  left: 0;
  font-size: var(--sura-h4-negrita-size);
  line-height: 26px;
  display: block;
  color: var(--color-skyblue-100);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 5;
}

.frame-child15 {
  width: 276px;
  position: absolute;
  margin: 0 !important;
  top: 294px;
  left: 163px;
  border-radius: 50%;
  border: 1px solid var(--sura-primary-aqua-sura);
  box-sizing: border-box;
  height: 276px;
  z-index: 6;
}

.frame-child16 {
  width: 276px;
  position: absolute;
  margin: 0 !important;
  top: 294px;
  left: 420px;
  border-radius: 50%;
  border: 1px solid var(--sura-primary-aqua-sura);
  box-sizing: border-box;
  height: 276px;
  z-index: 7;
}

.frame-child17 {
  width: 276px;
  position: absolute;
  margin: 0 !important;
  top: 294px;
  left: 681px;
  border-radius: 50%;
  border: 1px solid var(--sura-primary-aqua-sura);
  box-sizing: border-box;
  height: 276px;
  z-index: 8;
}

.group-parent1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 56px;
}

.frame-wrapper3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-51xl) 80px;
  text-align: center;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.layer-1-icon1 {
  position: absolute;
  top: 101px;
  left: 1069px;
  width: 964.2px;
  height: 964.2px;
  overflow: hidden;
}
/* .layer-1-icon {
  position: absolute;
  top: -84px;
  left: 1077px;
  width: 964.2px;
  height: 964.2px;
  overflow: hidden;
} */

.evolucin-del-dividendo {
  position: relative;
  top: 0px;
  left: 0;
  line-height: var(--sura-h1-negrita-size);
  display: flex;
  align-items: center;
  width: 100%;
}

.evolucin-del-dividendo-wrapper {
  width: 100%;
  position: relative;
  height: fit-content;
}

.texto-banner-inner {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.texto-banner1 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
  margin-bottom: 30px;
}

.group-child2 {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: var(--br-base);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  width: 632px;
  height: 378px;
}

.recurso-grafica-1-icon {
  position: relative;
  top: 0;
  left: 0;
  width: 680px;
  height: 450px;
  object-fit: contain;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
}

.component-1-child {
  position: absolute;
  height: 100%;
  width: 80.34%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 19.66%;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-azul-gs);
}

.cop-0 {
  position: relative;
  top: 0px;
  left: 0px;
  line-height: var(--sura-h1-negrita-size);
  color: var(--sura-primary-aqua-sura);
  font-weight: 100;
  display: flex;
  align-items: center;
  width: 100%;
  height: fit-content;
  margin-bottom: 20px;
}

.cop-0-wrapper {
  width: 100%;
  position: relative;
  height: fit-content;
}

.texto-banner-child {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.texto-banner2 {
  position: relative;
  height: fit-content;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 64px;
}

.lorem-ipsum {
  position: relative;
  top: 0;
  left: 0;
  line-height: 26px;
  display: block;
  width: 100%;
  height: fit-content;
  color: #fff;
  text-align: left;
  margin: 15px 0;
}

.arrow-1-stroke {
  position: relative;
  width: 68%;
  max-width: 100%;
  max-height: fit-content;
  object-fit: contain;
  margin-top: 40px;
}

.group-child3 {
  position: absolute;
  height: 77.08%;
  width: 100%;
  top: 14.58%;
  right: 0%;
  bottom: 8.33%;
  left: 0%;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-gris-claro);
}

.b6 {
  position: relative;
  top: 0%;
  left: 0;
  line-height: 26px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: fit-content;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-gris-claro);
  text-align: center;
  font-size: 20px;
}

.rectangle-parent2 {
  position: absolute;
  height: 12.7%;
  width: 21.84%;
  top: 5.82%;
  right: 7.04%;
  bottom: 81.48%;
  left: 71.12%;
}

.component-1 {
  position: relative;
  top: 0px;
  left: 0;
  width: 370px;
  height: fit-content;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-azul-gs);
  padding: 30px 20px;
}

.rectangle-parent1 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
  font-size: var(--sura-h4-negrita-size);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.banner2 {
  align-self: stretch;
  position: relative;
  background-color: var(--color-silver-400);
  height: fit-content;
  flex-shrink: 0;
  font-size: var(--sura-h1-negrita-size);
  padding: 50px 0;
}

.banner2_cnt {
  width: 100%;
  position: relative;
  display: block;
  max-width: 1120px;
  margin: 0 auto;
}

.desempeo-de-nuestras-container {
  position: absolute;
  top: 0px;
  left: 0px;
  line-height: var(--sura-h2-negrita-size);
  display: inline-block;
  width: 672px;
  height: 81px;
}

.group-child4 {
  position: absolute;
  top: 0px;
  left: 0.3px;
  border-radius: var(--br-base);
  background-color: rgba(217, 225, 233, 0.2);
  width: 100%;
  height: 642px;
}

.suramericana-wrapper {
  width: 244px;
  border-radius: var(--br-5xs);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) var(--padding-13xl);
  box-sizing: border-box;
}
.suramericana-informe-anual-logo-icon {
  position: absolute;
  top: 0px;
  left: 0;
  width: 36%;
  height: 10%;
}
.bancolombia-informe-anual-logo-icon {
  position: absolute;
  top: 0px;
  left: 0;
  height: 24px;
}
canvas#chartPais {
  position: relative;
  z-index: 1;
}
.sura-asset-management-wrapper {
  width: 308px;
  border-radius: var(--br-9xs);
  background-color: rgba(217, 225, 233, 0.034);
  color: var(--sura-primary-azul-gs);

  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) 0px;
  box-sizing: border-box;
}

.bancolombia-wrapper {
  width: 213px;
  border-radius: var(--br-9xs);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) 0px;
  box-sizing: border-box;
}

.frame-parent9 {
  width: 794px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}

.frame-wrapper4 {
  position: absolute;
  top: 14px;
  left: calc(50% - 403.35px);
  width: 806px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.grupo-sura-informe-anual-logo-icon {
  position: absolute;
  top: 0px;
  left: 0;
  width: 125.3px;
  height: 61px;
}

.cifras {
  position: absolute;
  top: 82px;
  left: 2.1px;
  line-height: 22px;
  font-weight: 600;
  display: -webkit-inline-box;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 317px;
}

.group-child5 {
  position: absolute;
  top: 106.5px;
  left: 1.6px;
  border-top: 1px solid var(--sura-primary-azul-gs);
  box-sizing: border-box;
  width: 462px;
  height: 1px;
}

.asla-efectos-de {
  position: absolute;
  top: 103px;
  left: 0.1px;
  font-size: var(--sura-caption-regular-size);
  color: var(--color-dimgray);
  text-align: justify;
  display: inline-block;
  width: 250px;
  height: 23px;
}

.asla-efectos-roe {
  position: absolute;
  top: 40px;
  left: 0;
  font-size: var(--sura-caption-regular-size);
  color: var(--color-dimgray);
  text-align: left;
  display: inline-block;
  width: 185px;
  height: fit-content;
  line-height: 116%;
}

.group-child6 {
  position: absolute;
  height: 23.81%;
  width: 20.79%;
  top: 23.02%;
  right: 83.19%;
  bottom: 53.17%;
  left: 0.02%;
  border-radius: var(--br-base);
  background-color: var(--sura-primary-aqua-sura);
}

.b7 {
  position: absolute;
  top: 23.81%;
  left: 6.13%;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconos-flechasflecha-arriba-3 {
  position: absolute;
  height: 12.7%;
  width: 3.27%;
  top: 27.78%;
  right: 94.53%;
  bottom: 59.52%;
  left: 2.2%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.utilidad-neta-controladora {
  position: absolute;
  top: 0px;
  left: 0.1px;
  font-size: var(--sura-s1-regular-size);
  display: inline-block;
  color: var(--color-gray-100);
  width: 268px;
  height: 26px;
}

.span3 {
  font-size: var(--sura-s1-regular-size);
  font-weight: 800;
  color: var(--sura-primary-aqua-sura);
}

.cop-885-mil-container {
  position: absolute;
  top: 59px;
  left: 0px;
  display: inline-block;
  width: 268px;
  height: 46px;
  font-size: var(--sura-h2-negrita-size);
  color: var(--sura-primary-azul-gs);
}

.b8 {
  position: absolute;
  top: 3.33%;
  left: 35%;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconos-flechasflecha-arriba-4 {
  position: absolute;
  height: 53.33%;
  width: 18.75%;
  top: 20%;
  right: 68.75%;
  bottom: 26.67%;
  left: 12.5%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.rectangle-parent4 {
  position: absolute;
  height: 53.57%;
  width: 47.62%;
  top: 46.43%;
  right: 52.38%;
  bottom: 0%;
  left: 0%;
}

.roe-ajustado {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: var(--sura-s1-regular-size);
  display: inline-block;
  color: var(--color-gray-100);
  width: 168px;
  height: 26px;
}

.group-parent2 {
  position: absolute;
  height: 44.44%;
  width: 36.63%;
  top: 0%;
  right: 0%;
  bottom: 55.56%;
  left: 63.37%;
}

.asla-efectos-de-tasas-de-camb-parent {
  position: absolute;
  top: 121px;
  left: 0px;
  width: 458.6px;
  height: 126px;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.asla-efectos-de1 {
  position: absolute;
  top: 90px;
  left: 0.1px;
  text-align: justify;
  display: inline-block;
  width: 250px;
  height: 23px;
}

.b9 {
  position: absolute;
  top: 3.33%;
  left: 32.18%;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconos-flechasflecha-arriba-5 {
  position: absolute;
  height: 53.33%;
  width: 17.24%;
  top: 20%;
  right: 71.26%;
  bottom: 26.67%;
  left: 11.49%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}

.rectangle-parent5 {
  position: absolute;
  height: 26.55%;
  width: 32.45%;
  top: 24.78%;
  right: 67.51%;
  bottom: 48.67%;
  left: 0.04%;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.span4 {
  font-size: var(--sura-s1-regular-size);
  color: var(--sura-primary-aqua-sura);
}

.cop-719-billones-container {
  position: absolute;
  top: 50px;
  left: 0px;
  display: inline-block;
  width: 268px;
  height: 46px;
  font-size: var(--sura-h2-negrita-size);
  color: var(--sura-primary-azul-gs);
}

.asla-efectos-de-tasas-de-camb-group {
  position: absolute;
  top: 290px;
  left: 0px;
  width: 268.1px;
  height: 113px;
  font-size: var(--sura-caption-regular-size);
  color: var(--color-dimgray);
}

.grupo-sura-informe-anual-logo-parent {
  position: absolute;
  top: 0px;
  left: -0.1px;
  width: 472.5px;
  height: 403px;
}

.group-wrapper2 {
  position: absolute;
  top: 120px;
  left: 514.5px;
  width: 319px;
  height: 485px;
  text-align: left;
}

.group-child9 {
  position: absolute;
  top: 93px;
  left: 0px;
  border-top: 1px solid var(--color-silver-100);
  box-sizing: border-box;
  width: 100%;
  height: 1px;
}

.mask-group-icon {
  position: absolute;
  top: 119px;
  left: 45.5px;
  width: 439px;
  height: 429px;
  object-fit: contain;
}

.rectangle-parent3 {
  position: absolute;
  top: 124px;
  left: 0;
  width: 100%;
  height: 642px;
  text-align: center;
  font-size: var(--sura-s1-regular-size);
}

.desempeo-de-nuestras-principa-parent {
  width: 100%;
  position: relative;
  height: 766px;
}

.group-wrapper1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-51xl) 0px;
}

.gobierno-corporativo-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 375px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.frame-icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1120px;
  height: 488px;
  overflow: hidden;
}

.estructura-de-propiedad {
  position: absolute;
  top: 34px;
  left: 28px;
  line-height: 26px;
  display: -webkit-inline-box;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 463px;
}

.graphic-torta-wrapper1 {
  position: absolute;
  top: 32px;
  left: 521px;
  width: 540px;
  height: 422px;
  font-size: var(--sura-h3-negrita-size);
  color: var(--paleta-complementaria-azul-profundo);
}

.frame-parent11 {
  position: absolute;
  top: 64px;
  left: 0px;
  width: 1120px;
  height: 488px;
  font-size: var(--sura-h4-negrita-size);
  color: var(--color-skyblue-100);
}

.frame-parent10 {
  width: 1120px;
  position: relative;
  height: 552px;
}

.instance-child {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 600px;
  overflow: hidden;
  max-width: 1120px;
  right: 0;
  margin: auto;
  object-fit: cover;
  border-radius: 20px;
}

.junta-directiva-wrapper {
  width: 244px;
  border-radius: var(--br-5xs);
  color: var(--sura-primary-azul-gs);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) var(--padding-13xl);
  box-sizing: border-box;
}

.alta-gerencia-wrapper {
  width: 182px;
  border-radius: var(--br-9xs);
  height: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-smi) 0px;
  box-sizing: border-box;
  color: var(--color-gray-100);
}

.frame-parent13 {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}

.frame-wrapper5 {
  position: absolute;
  width: fit-content;
  top: calc(50% - 217.5px);
  right: 28.68%;
  left: 28.78%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.sesiones {
  position: absolute;
  height: 12.5%;
  width: 44.05%;
  top: 0%;
  left: 0.79%;
  display: inline-block;
}

.asistencia-al-100 {
  position: absolute;
  height: 12.5%;
  width: 100%;
  top: 57.21%;
  left: 0%;
  display: inline-block;
}

.div8 {
  position: absolute;
  height: 34.62%;
  width: 41.67%;
  top: 6.25%;
  left: 0.79%;
  font-size: var(--font-size-37xl);
  color: var(--sura-primary-azul-gs);
  display: inline-block;
}

.div9 {
  position: absolute;
  height: 22.12%;
  width: 87.3%;
  top: 77.88%;
  left: 0%;
  font-size: var(--font-size-37xl);
  color: var(--sura-primary-azul-gs);
  display: inline-block;
}

.sesiones-parent {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
}

.group-wrapper3 {
  position: absolute;
  height: 44.92%;
  width: 90%;
  max-width: 900px;
  top: 15%;
  right: 0;
  bottom: 17.71%;
  left: 0;
  text-align: left;
  color: var(--color-gray-100);
  margin: auto;
}

.tab_content--wrapper {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.tab_content--wrapper h6 {
  width: 250px;
  position: relative;
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1e1e1e;
}

.tab_content--wrapper picture {
  width: calc(100% - 270px);
  position: relative;
  display: block;
}

.group-wrapper24 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 22.37%;
  text-align: left;
  color: var(--color-gray-100);
  max-width: 1120px;
  left: 0;
  right: 0;
  margin: auto;
}

.group-wrapper25 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 22.37%;
  bottom: 17.71%;
  text-align: left;
  color: var(--color-gray-100);
}

.instance-item {
  position: absolute;
  height: 0.22%;
  width: 100.1%;
  top: 19.98%;
  right: -0.05%;
  bottom: 79.81%;
  left: -0.05%;
  border-top: 1px solid var(--color-silver-100);
  box-sizing: border-box;
}

.frame-parent12 {
  width: 100%;
  position: relative;
  height: 463px;
  text-align: center;
  font-size: var(--sura-s1-regular-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}
.group-wrapper3 .tab-content {
  display: none;
}

.group-wrapper3 .tab-content.active {
  display: block;
}

.group-container small {
  font-size: 60%;
}

.group-wrapper2 small {
  font-size: 60%;
}

.texto-banner-parent h6 {
  width: 100%;
  position: relative;
  display: block;
  color: var(--color-gray-100);
  font-weight: 700;
  font-size: 24px;
  margin: 20px 0 50px;
}

/* -----------------------------------------------------------------------------se comentan lineas interferencia  tab content------------------------------------- */

.tab-button {
  cursor: pointer;
}

.tab-button.active {
  background-color: var(--sura-primary-azul-gs);
  color: white;
}

.tab-button-inv {
  cursor: pointer;
}

.tab-button-inv.active {
  background-color: var(--sura-primary-azul-gs);
  color: white;
}

.tab-content-inv {
  display: none;
}

.tab-content-inv.active {
  display: block;
}

.group-parent3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 0px var(--padding-51xl);
  gap: 50px;
}

.texto-banner3 {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: fit-content;
  margin-bottom: 30px;
}

.recurso-22x-2 {
  position: relative;
  top: 0;
  left: 0;
  border-radius: var(--br-base);
  width: 100%;
  height: fit-content;
  object-fit: cover;
  margin-bottom: 20px;
}

.rectangle-div2 {
  width: 100%;
  height: 100%;
  border-radius: var(--br-base);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  padding: 10px;
}

.rectangle-div2 h4 {
  width: 100%;
  position: relative;
  display: block;
  color: var(--color-gray-100);
  font-family: "Sura Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 5px;
}

.rectangle-div2 img {
  width: 85%;
  height: calc(100% - 60px);
  position: relative;
  display: block;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}

.tab_mv h6 {
  width: 100%;
  position: relative;
  display: block;
  color: var(--color-gray-100);
  text-align: left;
  font-weight: 700;
  margin-bottom: 5px;
}

.asuntos-materiales {
  width: 100%;
  height: fit-content;
  border-radius: var(--br-base);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.asuntos-materiales ._title {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px;
}

.asuntos-materiales ._title h6 {
  width: calc(100% - 125px);
  position: relative;
  display: block;
  color: var(--color-gray-100);
  font-weight: 700;
  font-size: 20px;
  max-width: 420px;
}

.asuntos-materiales ._title a {
  width: fit-content;
  height: fit-content;
  position: relative;
  display: block;
  font-size: var(--sura-body-negrita-size);
  border-radius: 20px;
  padding: 12px 25px;
  background: var(--sura-primary-aqua-sura);
  line-height: 1;
}

.evaluacion-sostenibilidad {
  width: 100%;
  height: fit-content;
  border-radius: var(--br-base);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
}

.evaluacion-sostenibilidad ._title {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px;
  top: 10px;
}

.evaluacion-sostenibilidad ._title h6 {
  width: calc(100% - 125px);
  position: relative;
  display: block;
  color: var(--color-gray-100);
  font-weight: 700;
  font-size: 20px;
  max-width: 420px;
}

.evaluacion-sostenibilidad ._title a {
  width: fit-content;
  height: fit-content;
  position: relative;
  display: block;
  font-size: var(--sura-body-negrita-size);
  border-radius: 20px;
  padding: 12px 25px;
  background: var(--sura-primary-aqua-sura);
  line-height: 1;
}

.imagen-full {
  width: 360px;
  height: auto;
  display: block;
  object-fit: contain;
}

.swiper {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-full {
  width: 362px;
  height: auto;
  display: block;
  object-fit: contain;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img.imagen-full {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  /* opcional para suavizar las esquinas */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* opcional para dar profundidad */
}

.swiper {
  width: 100%;
  max-width: 650px;
  height: auto;
  margin-top: 2%;
}

.cifras-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  background-color: #0b2b66;
  border-radius: 20px;
}
.cifras-layout2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  background-color: #0b2b66;
  border-radius: 20px;
}

.cifras-columna-izquierda {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cifras-columna-izquierda img,
.cifras-columna-derecha img {
  display: block;
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* Ajuste para que la columna derecha ocupe el alto completo */
.cifras-columna-derecha {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.texto-banner-parent {
  width: 100%;
  position: relative;
  height: fit-content;
}

.gestiones-relevantes {
  position: absolute;
  width: 68.76%;
  top: 0%;
  left: 0%;
  line-height: 22px;
  font-weight: 600;
  display: -webkit-inline-box;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.group-child10 {
  position: absolute;
  top: 21.5px;
  left: -0.5px;
  border-top: 1px solid var(--sura-primary-azul-gs);
  box-sizing: border-box;
  width: 462px;
  height: 1px;
}

.gestiones-relevantes-parent {
  position: absolute;
  height: 9.32%;
  width: 66.43%;
  top: 0%;
  right: 33.57%;
  bottom: 90.68%;
  left: 0%;
  font-size: var(--sura-s1-regular-size);
}

.div10 {
  position: absolute;
  height: 24.08%;
  width: 34.2%;
  top: 0%;
  left: 0%;
  font-weight: 600;
  display: inline-block;
}

.son-las-categoras {
  position: absolute;
  top: 63px;
  left: 0px;
  font-size: var(--sura-body-negrita-size);
  text-align: start;
  color: var(--color-dimgray);
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  width: 307px;
}

.parent {
  position: absolute;
  height: 80.93%;
  width: 44.24%;
  top: 14.41%;
  right: 55.76%;
  bottom: 4.66%;
  left: 0%;
}

.div11 {
  position: absolute;
  height: 31.29%;
  width: 34.2%;
  top: 0%;
  left: 0%;
  font-weight: 600;
  display: inline-block;
}

.suman-las-causas {
  position: absolute;
  top: 63px;
  left: 0px;
  text-align: start;
  font-size: var(--sura-body-negrita-size);
  color: var(--color-dimgray);
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  width: 307px;
}

.group {
  position: absolute;
  height: 62.29%;
  width: 44.24%;
  top: 14.41%;
  right: 0%;
  bottom: 23.31%;
  left: 55.76%;
}

.group-parent5 {
  width: 694px;
  position: relative;
  height: 236px;
  font-size: var(--font-size-37xl);
  top: 35%;
  left: 130px;
}

.group-parent4 {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 43px;
}

.banner-inner1 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
}

.capa-1-icon1 {
  position: absolute;
  top: 0;
  left: 240px;
  width: 1357px;
  height: 1357px;
  overflow: hidden;
}

.descarga-el-pdf {
  position: relative;
  top: 0px;
  left: 0px;
  line-height: var(--sura-h1-negrita-size);
  display: flex;
  text-align: start;
  align-items: center;
  width: 522px;
  margin-bottom: 15px;
}

.botn-base22 {
  position: relative;
  top: 0;
  left: 0px;
  border-radius: var(--br-xl);
  background-color: var(--sura-primary-azul-gs);
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base) var(--padding-lg);
  box-sizing: border-box;
  width: fit-content;
  max-width: 427px;
  text-align: center;
  font-size: var(--sura-body-negrita-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
}
.botn-base22 {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  /* sombra superior normal */
}

.botn-base22:active {
  transform: translateY(2px);
  /* se reduce la sombra para simular que se hunde */
}

.descarga-el-pdf-del-informe-an-parent {
  position: relative;
  top: 0px;
  left: 0;
  width: fit-content;
  height: fit-content;
}

.group-wrapper4 {
  position: relative;
  top: 0;
  left: 0px;
  width: fit-content;
  height: fit-content;
}

.botn-base23 {
  position: absolute;
  top: 410px;
  left: 154px;
  border-radius: var(--br-xl);
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  border: 1px solid var(--sura-primary-aqua-sura);
  box-sizing: border-box;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-base) var(--padding-lg);
  min-width: 150px;
  max-width: 427px;
}

.botn-base2-wrapper {
  position: absolute;
  height: 100%;
  width: 43.17%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 56.83%;
  text-align: center;
  font-size: var(--sura-body-negrita-size);
  color: var(--sura-primary-aqua-sura);
}

.frame-parent14 {
  position: relative;
  top: 0;
  left: 0;
  width: 90%;
  max-width: 1120px;
  height: fit-content;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.banner4 {
  position: relative;
  top: 0;
  left: 0px;
  background-color: var(--color-gainsboro-100);
  width: 100%;
  height: fit-content;
  overflow: hidden;
}

.mockup-1-icon {
  position: relative;
  top: 0;
  left: 0;
  left: 0;
  width: 336px;
  height: fit-content;
  object-fit: cover;
}

.banner3 {
  align-self: stretch;
  position: relative;
  background-color: var(--color-silver-400);
  height: fit-content;
  font-size: var(--sura-h1-negrita-size);
  margin-top: 100px;
  padding-top: 40px;
}

.banner-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--sura-h2-negrita-size);
  color: var(--sura-primary-azul-gs);
  text-align: center;
  box-sizing: border-box;
}

.gruposurainforme-de-gestin {
  width: 100%;
  position: relative;
  background-color: var(--paleta-principal-blanco-todo-puede-pasar);
  height: 100%;
  overflow: hidden;
  text-align: left;
  font-size: var(--sura-caption-regular-size);
  color: var(--paleta-principal-blanco-todo-puede-pasar);
  font-family: var(--sura-caption-regular);
}

/* Estado cerrado por defecto */
.styled-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

/* Estado desplegado al estar activo */
.styled-dropdown.active {
  max-height: 500px; /* Puedes ajustar el valor */
  opacity: 1;
  pointer-events: auto;
}

.tlb {
  margin-bottom: 30px !important;
}
.ttl-1 .evolucin-del-dividendo {
  left: 0;
}

#gestion-de-riegos-movil.banner3 {
  display: none;
}

#gerencia {
  width: 100%;
  position: relative;
  display: block;
}

.top_content {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
  border-bottom: 2px solid #0033a0;
  padding: 30px;
}

.top_content ._leftBx {
  width: 40%;
  position: relative;
  display: block;
  border-right: 2px solid #0033a0;
  padding-right: 50px;
}

.top_content ._leftBx p {
  width: 100%;
  position: relative;
  display: block;
  font-size: 20px;
  font-weight: 700;
}

.top_content ._rightBx {
  width: 60%;
  position: relative;
  display: block;
  padding-left: 10%;
}

.top_content ._rightBx h5 {
  width: 100%;
  position: relative;
  display: block;
  font-size: 42px;
  color: #001e60;
  font-weight: 300;
}

.top_content ._rightBx h5 strong {
  font-weight: 700;
}

.top_content ._rightBx h6 {
  width: 100%;
  position: relative;
  display: block;
  font-size: 24px;
  color: #001e60;
  font-weight: 300;
}

.top_content ._rightBx h6 strong {
  font-weight: 700;
}

.top_content ._rightBx p {
  width: 100%;
  position: relative;
  display: block;
  color: #53565a;
  margin-top: 10px;
  font-size: 16px;
}

.bottom_content {
  width: 100%;
  position: relative;
  display: block;
  padding-top: 50px;
}

.bottom_content ._members {
  width: 100%;
  max-width: 800px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  gap: 15px;
}

.bottom_content ._members h4 {
  width: 100%;
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: 700;
  color: var(--sura-primary-azul-gs);
}

.bottom_content ._members .member_itm {
  width: calc(100% / 3 - 10px);
  position: relative;
  display: block;
}

.bottom_content ._members .member_itm figure {
  width: 100px;
  height: 100px;
  position: relative;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 10px;
}

.bottom_content ._members .member_itm figure img {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.bottom_content ._members .member_itm h6 {
  width: 100%;
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1e1e1e;
  text-align: center;
}

.bottom_content ._members .member_itm p {
  width: 100%;
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #001e60;
  text-align: center;
}

._highText {
  width: 100%;
  max-width: 900px;
  position: relative;
  display: block;
  margin: 20px auto 0;
  padding: 20px 40px;
  border-radius: 16px;
  background: #001e60;
}

._highText p {
  width: 100%;
  position: relative;
  display: block;
  color: #ffffff;
  font-size: 18px;
}

.hide_on_desktop {
  display: none !important;
}

sup {
  top: -4px;
  font-family: "Sura Sans", sans-serif;
  font-size: 12px;
}

@media (max-width: 1450px) and (min-width: 769px) {
  .graphic-torta-wrapper {
    margin-left: 0px;
  }
  .texto-banner {
    left: 0px;
  }
  .mockup-1-icon {
    position: absolute;
    top: 915px;
    left: 330.6px;
  }
  .recurso-22x-2 {
    left: 92px;
  }
  .rectangle-parent1 {
    left: 80px;
  }
  .evolucin-del-dividendo {
    left: -90px;
  }
  .ttl-1 .evolucin-del-dividendo {
    left: 0;
  }
  .group-parent {
    padding: var(--padding-41xl) var(--padding-71xl);
    gap: 10px;
    padding: 60px 0;
  }

  .frame-child1 {
    object-fit: cover;
    width: 345.3px;
    height: 342px;
    position: relative;
  }
  .group-parent5 {
    left: 130px;
  }
  .descarga-el-pdf-del-informe-an-parent {
    position: absolute;
    left: 0px;
  }
}

@media (min-width: 1200px) {
  section.bg-white {
    display: none !important;
  }
  section.seccionPortafolio {
    display: block !important;
    width: 100%;
  }
  section.seccionPortafolio1 {
    display: none !important;
  }
  .banner1 {
    display: none !important;
  }
  section.seccionHitos2024 {
    display: none !important;
  }
  section.evoluciondividendo2024 {
    display: none !important;
  }
  section.DesempenoAcciones2024 {
    display: none !important;
  }
  section#gobierno-corporativo {
    display: none !important;
  }

  section#gobierno-seccion {
    display: none !important;
  }
  section#GestionRiesgos2024 {
    display: none !important;
  }

  section#SeccionFinalPdf2024 {
    display: none !important;
  }
  section.font-sura.bg-\[\#001b4c\].py-12.px-4.relative.overflow-hidden.seccionGobiernoCorporativo {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  #gobierno-corporativo {
    display: block !important;
  }
  section.seccionPortafolio {
    display: none !important;
    width: 100%;
  }
  section.font-sura.bg-\[\#001b4c\].py-12.px-4.relative.overflow-hidden.seccionGobiernoCorporativo {
    display: block !important;
  }
  section.seccionPortafolio1 {
    display: block !important;
  }

  section#SeccionFinalPdf2024 {
    display: block !important;
  }
  section#GestionRiesgos2024 {
    display: block !important;
  }
  section#gobierno-seccion {
    display: block !important;
  }

  section#gobierno-corporativo {
    display: block !important;
  }
  section.bg-white {
    display: block !important;
  }

  section.seccionHitos2024 {
    display: block !important;
  }
  section.evoluciondividendo2024 {
    display: block !important;
  }
  section.DesempenoAcciones2024 {
    display: block !important;
  }
  /* Oculta todo el contenido dentro de .gruposurainforme-de-gestin */
  .gruposurainforme-de-gestin > * {
    display: none !important;
  }

  /* Muestra solo la sección .banner-parent */
  .gruposurainforme-de-gestin > .banner-parent {
    display: block !important;
  }

  /* Dentro de .banner-parent, ocultamos todo menos .banner y .group-parent */
  .banner-parent > *:not(.banner):not(.group-parent) {
    display: none !important;
  }

  /* Asegura que estas dos secciones sí se vean */
  .banner-parent .banner,
  .banner-parent .group-parent {
    display: block !important;
  }
  .frame-child1 {
    left: 30%;
    margin-bottom: 30px;
  }
  .lorem-ipsum-dolor-sit-amet-co-parent {
    margin-left: 25%;
    text-align: start;
  }
}

@media (max-width: 768px) {
  .ellipse-parent {
    display: none;
  }
  .botn-base21 {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: fit-content;
    width: fit-content;
  }

  .presidente-grupo {
    text-align: center;
    display: -webkit-box;
    /* cambiamos inline-box a box para que respete ancho */
    margin: 0 auto;
  }

  .ellipse-parent {
    justify-content: flex-end;
    top: 15%;
    left: 2px;
  }

  .lorem-ipsum-dolor-sit-amet-co-parent {
    padding: 0 10px;
  }

  .ricardo-jaramillo-meja {
    font-size: 22px;
    margin-top: 5%;
    text-align: center;
  }

  .lorem-ipsum-dolor1 {
    font-size: 18px;
    text-align: start;
    padding: 0 5%;
  }

  .group-parent {
    flex-direction: column;
    /* Imagen arriba, texto abajo */
    padding: var(--padding-31xl) var(--padding-5xl);
    gap: 30px;
    text-align: center;
  }

  .frame-child1 {
    max-width: 40%;
    height: auto;
    margin-top: 24px;
    left: 25%;
    margin-bottom: 24px;
  }

  .lorem-ipsum-dolor-sit-amet-co-parent {
    width: 100%;
  }

  .line-parent {
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    /* Puedes ajustar este valor según se vea mejor */
    align-items: center;
    /* Centra el contenido internamente también */
    text-align: center;
    /* Centra textos si hay */
  }

  .layer-1 {
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
  }

  .lorem-ipsum-dolor-sit-amet-co-parent {
    margin-left: 0px;
  }

  .group-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
  }

  .evaluacion-sostenibilidad ._title {
    position: relative;
    top: 0;
  }

  .asuntos-materiales ._title h6,
  .evaluacion-sostenibilidad ._title h6 {
    width: 100%;
  }

  .component-1 {
    width: 100%;
  }

  #gestion-de-riegos-movil.banner3 {
    display: block;
  }

  .banner3 {
    align-self: stretch;
    position: relative;
    background-color: var(--color-silver-400);
    height: fit-content;
    font-size: var(--sura-h1-negrita-size);
    margin-top: 70px;
    padding-top: 40px;
  }

  .layer-1-icon1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: unset;
  }

  .banner-inner1 {
    position: relative;
    top: 0;
    left: 0;
    width: 90%;
    height: fit-content;
    margin: 0 auto;
  }

  .group-parent4 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 43px;
  }

  .texto-banner-parent {
    width: 100%;
    position: relative;
    height: fit-content;
  }

  .texto-banner3 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: fit-content;
    margin-bottom: 30px;
  }

  .texto-banner-inner {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .evolucin-del-dividendo-wrapper {
    width: 100%;
    position: relative;
    height: fit-content;
  }

  .ttl-1 .evolucin-del-dividendo {
    left: 0;
  }

  .recurso-22x-2 {
    position: relative;
    top: 0;
    left: 0;
    border-radius: var(--br-base);
    width: 100%;
    height: fit-content;
    object-fit: cover;
    margin-bottom: 20px;
  }

  .frame-wrapper3 {
    padding: 30px 0 0;
  }

  .group-parent1 {
    width: 100%;
  }

  .hitos-del-2024-wrapper {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .filtro-aos-parent {
    position: absolute;
    top: 83px;
    left: 0;
    width: 100%;
    height: 87px;
    text-align: center;
    font-size: var(--sura-body-negrita-size);
  }

  .filtro-aos {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 90px;
    overflow: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #011e5d #f1f1f1;
  }

  .contenedor-mes {
    padding: 20px;
  }

  .eleccin-de-juan,
  .sura-entre-las,
  .cultura-latinoamrica {
    width: 100%;
  }

  .frame-parent12 {
    position: relative;
    height: fit-content;
    padding: 30px 0;
  }

  .instance-child {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
  }

  .frame-wrapper5 {
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    height: fit-content;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .frame-parent13 {
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-3xs);
  }

  .group-wrapper3 {
    position: relative;
    height: fit-content;
    width: 90%;
    max-width: 900px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    color: var(--color-gray-100);
    margin: auto;
  }

  .group-wrapper24 {
    position: relative;
    height: fit-content;
    width: 90%;
    top: 0;
    bottom: 0;
    text-align: left;
    color: var(--color-gray-100);
    margin: 0 auto;
    padding: 30px 0;
  }

  .group-wrapper25 {
    position: relative;
    height: fit-content;
    width: 90%;
    top: 0;
    bottom: 0;
    text-align: left;
    color: var(--color-gray-100);
    margin: 0 auto;
    padding: 30px 0;
  }

  .top_content {
    gap: 40px;
  }

  .top_content ._leftBx {
    width: 100%;
    position: relative;
    display: block;
    border-right: 2px solid #0033a0;
    padding-right: 0;
  }

  .top_content ._rightBx {
    width: 100%;
    position: relative;
    display: block;
    padding-left: 0;
  }

  .bottom_content ._members .member_itm {
    width: 100%;
    position: relative;
    display: block;
  }

  ._highText {
    width: 100%;
    max-width: 900px;
    position: relative;
    display: block;
    margin: 20px auto 0;
    padding: 20px;
    border-radius: 16px;
    background: #001e60;
  }

  .tab_content--wrapper h6 {
    width: 100%;
    position: relative;
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1e1e1e;
  }

  .tab_content--wrapper picture {
    width: 100%;
    position: relative;
    display: block;
  }

  .hide_on_desktop {
    display: block !important;
  }

  .bottom_content ._members h4 {
    font-size: 24px;
  }

  .texto-banner-parent h6 {
    font-size: 18px;
    text-align: center;
  }

  .frame-parent8 {
    width: 90%;
    margin: 0 auto;
}
}