html {
  width: 100% !important;
  overflow-x: hidden;
}

/* Toggle Scroll Function Class */
.header.fixed {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border-border-disable, #bdbdbd);
  z-index: 2;
}
/* Testing */
.fill {
  width: 100%;
  min-height: 600px;
  border: 1px solid red;
}

header {
  width: 100%;
  height: 90px;
  padding: 10px 123px;
  background: var(--surface-surface-invert, #1a1a1a);
}
header .logo {
  min-width: 450px;
}
header .logo-mobile {
  display: none;
}
header .navbar-container {
  min-width: 432px;
  display: flex;
  align-items: center;
  justify-content: end;
}
header .navbar-container.mobile {
  display: none;
}
header .navbar-container.mobile .search-mobile-icon {
  margin-right: 20px;
  cursor: pointer;
}
header .navbar-container.mobile .burguer-icon {
  cursor: pointer;
}

header .navbar-container .navbar {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 32px;
}

header .navbar-container .navbar li a {
  color: var(--text-text-invert, #fff);
  font-feature-settings: 'clig' off, 'liga' off;
  /* Button/Large */
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.5s ease;
}

header .navbar-container .navbar li a:hover {
  color: var(--text-text-brand-light, #3bd7ba);
  transition: color 0.5s ease;
}

header .navbar-container .toggle-dark-btn {
  margin-left: 45px;
  cursor: pointer;
}
header .navbar-container .toggle-dark-btn img {
  width: 24px;
  height: 24px;
}

header .search.hide {
  display: none;
}

header .search {
  width: 40%;
  border-radius: 500px;
  border: 1px solid var(--border-border-disable, #bdbdbd);
  background: var(--surface-surface-primary, #fff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 10px;
}

header .search-btn {
  background: var(--surface-surface-brand-mid, #4db8a4);
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .search-txt {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  padding: 0 25px;
  color: var(--text-text-secondary, #616161);
}

header .menu {
  border-top: 1px solid white;
  height: 100dvh;
  width: 100%;
  min-height: auto;
  position: fixed;
  transform: translateY(0px);
  background: var(--surface-surface-invert, #1a1a1a);
  z-index: 9;
  transition: all 0.9s ease;
  top: 00px;
  left: 0;
  overflow-y: auto;
  padding: 10px 16px;
  opacity: 1;
}

header .menu.hide {
  opacity: 0;
  transition: all 0.9s ease;
  transform: translateY(-2000px);
}

header .menu-navbar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

header .menu-navbar-list a {
  color: var(--text-text-invert, #fff);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 32px;
  display: block;
  transition: color 0.5s ease;
}

header .menu-navbar-list a:hover {
  color: var(--text-text-brand-light, #3bd7ba);
  transition: color 0.5s ease;
}

header .menu-navbar-divider {
  border-top: 1px solid var(--border-border-disable, #bdbdbd);
  border-bottom: 1px solid var(--border-border-disable, #bdbdbd);
  padding-top: 32px;
}

header .close-menu-icon,
header .close-menu-search-icon {
  cursor: pointer;
}

header .burguer-icon.showing-menu path {
  stroke: rgba(59, 215, 186, 1);
}
header .search-mobile-icon.showing-menu path {
  fill: rgba(59, 215, 186, 1);
}

header .menu-search-title {
  color: var(--text-text-invert, #fff);
  /* H3/Bold */
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 166.667% */
  margin-bottom: 32px;
}

header .search-menu-component {
  width: 100%;
  display: flex !important;
  position: relative;
  margin: 0;
}

header .search-menu-component .search-btn {
  width: 45px;
}
header .toggle-dark-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
}
header .toggle-dark-container p {
  color: var(--text-text-invert, #fff);
  /* Button/Large */
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

header .toggle-container {
  display: flex;
  margin: 0 16px;
}

header .toggle-switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 34px;
}

header .toggle-input {
  display: none;
}

header .toggle-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border-radius: 34px;
  transition: background-color 0.3s;
  border: 2px solid rgba(189, 189, 189, 1);
}

header .toggle-input:checked + .toggle-label {
  background-color: transparent;
}

header .toggle-label:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background-color: #3bd7ba;
  border-radius: 50%;
  transition: transform 0.3s;
}

header .toggle-input:checked + .toggle-label:before {
  transform: translateX(20px);
}

header .form-check {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

header .moon-icon.on path {
  stroke: #3bd7ba;
}

header .sun-icon.on path {
  stroke: #3bd7ba;
}

.padding-y {
  padding-top: 72px;
  padding-bottom: 72px;
}
.padding-x {
  padding-left: 92px;
  padding-right: 92px;
}

#mainSearchBanner .search-banner-container {
  background-image: url('../assets/Banner-principal-V3.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainSearchBanner .search {
  min-width: 700px;
  border-radius: 500px;
  border: 1px solid var(--border-border-disable, #bdbdbd);
  background: var(--surface-surface-primary, #fff);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#mainSearchBanner .search-btn {
  background: var(--surface-surface-brand-mid, #4db8a4);

  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainSearchBanner .search-txt {
  width: 85%;
  border: none;
  background: none;
  outline: none;
  padding: 0 15px;
  color: var(--text-text-secondary, #616161);

  /* Input/Normal */
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#fixedNavbar {
  z-index: 2;
  position: sticky;
  top: 90px;
}

#fixedNavbar .fixed-navbar-container {
  width: 100%;
  min-height: 64px;
  height: auto;

  background: var(--surface-surface-invert, #1a1a1a);
  display: flex;
  justify-content: center;
  align-items: center;
}

#fixedNavbar .fixed-navbar-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 64px;
}
#fixedNavbar .fixed-navbar-container ul li {
  color: var(--text-text-invert, #fff);
  font-feature-settings: 'clig' off, 'liga' off;
  min-width: fit-content;
  /* Button/Large */
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.5s ease;
}

#fixedNavbar .fixed-navbar-container ul li:hover {
  color: var(--text-text-brand-light, #3bd7ba);
  transition: color 0.5s ease;
}

.h2-heading {
  color: var(--text-primary);
  /* Subtitle/Bold */
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
}

#boletinHome {
  background: var(--surface-primary);
}

#boletinHome .boletin-items-wrapper {
  display: flex;
  padding: 64px 0;
}

#boletinHome .boletin-items-wrapper .boletin-item {
  display: flex;
  max-width: 800px;
}

#boletinHome .boletin-items-wrapper .boletin-item .boletin-img {
  min-width: 350px;
  width: 350px;
  height: 450px;
}
#boletinHome .boletin-items-wrapper .boletin-item .boletin-img img {
  width: 100%;
  height: 100%;
}
#boletinHome .boletin-items-wrapper .boletin-item .boletin-detail {
  padding: 0 35px;
  min-width: 300px;
}

#boletinHome .boletin-items-wrapper .boletin-item .boletin-detail .subtitle {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 32px;
}
#boletinHome .boletin-items-wrapper .boletin-item .boletin-detail .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 16px;
}
#boletinHome .boletin-items-wrapper .boletin-item .boletin-detail .text {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 32px;
}
#boletinHome .boletin-items-wrapper .boletin-item .boletin-detail .btn {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 172px;
  height: 48px;
  color: var(--text-text2-invert);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  border-radius: 100px;
  border: 2px solid var(--surface-brand-dark);
  background: var(--surface-brand-dark);
  transition: all 0.5s ease;
}

#boletinHome .boletin-items-wrapper .boletin-item .boletin-detail .btn:hover {
  color: var(--text-text-invert, #fff);
  background: var(--surface-invert);
  transition: all 0.5s ease;
  border: 1px solid transparent;
}

.info-item {
  min-width: 300px;
  padding: 0 16px;
}

.info-item .subtitle {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.social-media-container {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
}
.social-media-container .social-box {
  display: flex;
  align-items: center;
}
.social-media-container .social-box svg {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.social-media-container .social-box p {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.info-item .subtitle {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 32px;
}
.info-item .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
  transition: all 0.5s ease;
}
.boletin-items-wrapper .info-item:hover .title {
  color: var(--text-brand);
  transition: all 0.5s ease;
}

.info-item .text {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 32px;
}
.autor-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.autor-img {
  margin-right: 16px;
}
.autor-img img {
  border-radius: 32px;
}

.autor-detail .name {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.autor-detail .role {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.divider-top {
  padding-top: 8px;
  border-top: 1px dotted rgba(236, 236, 236, 1);
}
.lateral-divider {
  border-left: 1px solid rgba(236, 236, 236, 1);
  border-right: 1px solid rgba(236, 236, 236, 1);
}
#templateCarrusel {
  background: var(--surface-secondary);
}

#templateCarrusel .swiper {
  overflow: unset;
}

#templateCarrusel .template-carrusel-container {
  display: flex;
  min-height: 380px;
}

#templateCarrusel .template-carrusel-container .static-topic {
  max-width: 400px;
  min-width: 400px;
}

#templateCarrusel .template-carrusel-container .static-topic .title {
  color: var(--text-primary, #1a1a1a);
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  margin-bottom: 16px;
}
#templateCarrusel .template-carrusel-container .static-topic .text {
  color: var(--text-secondary, #616161);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 64px;
}
#templateCarrusel .opinion-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 249px;
  height: 48px;
  color: var(--text-text2-invert);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  border-radius: 100px;
  border: 2px solid var(--surface-brand-dark);
  background: var(--surface-brand-dark);
  transition: all 0.5s ease;
}

#templateCarrusel .opinion-btn:hover {
  color: var(--text-text-invert, #fff);
  background: var(--surface-invert);
  transition: all 0.5s ease;
  border: 1px solid transparent;
}
#templateCarrusel .slider-container {
  width: 100%;
  overflow: hidden;
  padding-left: 92px;
}

#templateCarrusel .swiper {
  width: 100%;
  min-height: 344px;
}

#templateCarrusel .swiper-wrapper {
  display: flex;
  align-items: stretch;
  align-content: stretch;
}

#templateCarrusel .swiper-slide {
  border-radius: var(--s, 8px);
  border: 1px solid var(--border-primary, #1a1a1a);
  background: transparent;
  padding: 32px;
  display: flex;
  min-height: 300px;
}

.card-slider {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.card-slider .subtitle {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 133.333% */
  margin-bottom: 32px;
}
.card-slider .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 150% */
  margin-bottom: 16px;
  overflow: hidden; /* Oculta el texto que se desborda */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limita el texto a tres líneas */
  -webkit-box-orient: vertical;
}
.card-slider .text {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-bottom: 16px;
}
.card-slider .icons-container {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 32px;
}
.card-slider .icons-container svg {
  cursor: pointer;
}
.dark-mode .card-slider .icons-container svg path {
  fill: transparent;
  stroke: white;
}
.dark-mode .card-slider .icons-container svg:first-child path {
  fill: white;
  stroke: transparent;
}

.dark-mode .bg-white .swiper-slide .card-slider .icons-container svg path {
  fill: transparent !important;
  stroke: #3bd7ba !important;
}
.dark-mode .bg-white .swiper-slide .card-slider .icons-container svg:first-child path {
  fill: #3bd7ba !important;
  stroke: transparent !important;
}

#templateCarrusel .swiper-pagination {
  position: relative;
  bottom: 0;
  text-align: end;
  z-index: 4;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 40px 0;
}

#templateCarrusel .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--border-disable);
  opacity: 1;
  transition: all 0.5s ease;
}

#templateCarrusel .swiper-pagination-bullet-active {
  width: 32px;
  height: 12px;
  border-radius: 16px;
  background: var(--surface-brand-dark);
  transition: all 0.5s ease;
}
#suscriptionBanner {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--surface-primary);
}
#suscriptionBanner .banner-container {
  padding: 65px 0;
  width: 100%;
  border-radius: var(--m, 16px);
  background: transparent;
  display: flex;
  justify-content: center;
  background: #f7fef9;
}
#suscriptionBanner .banner-container .sub-banner-img {
  min-width: 500px;
  max-width: 500px;
  max-height: 415px;
  margin-right: 100px;
}
#suscriptionBanner .banner-container .sub-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#suscriptionBanner .banner-container .sub-banner-content {
  max-width: 571px;
  padding: 0 50px;
}

.sub-banner-content .title {
  color: #1a1a1a;
  font-family: var(--font-family-primary);
  font-size: 43px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px; /* 130.233% */
  margin-bottom: 32px;
}

.sub-banner-content .text {
  color: #1a1a1a;
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
  letter-spacing: -0.04px;
  margin-bottom: 64px;
}

.sub-banner-content .sub-input-container {
  display: flex;
  align-items: center;
}
.sub-banner-content .sub-input-container input {
  width: 288px;
  height: 48px;
  border-radius: var(--xxl, 128px);
  border: 1px solid var(--border-disable, #bdbdbd);

  padding: 0 20px;
}
.sub-banner-content .sub-input-container input:placeholder {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.sub-banner-content .sub-input-container .sub-btn {
  border-radius: 100px;
  background: var(--surface-brand-dark);
  color: var(--text-text2-invert);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 0;
  width: 146px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
}

.sub-banner-content .sub-input-container .sub-btn:hover {
  color: var(--text-text-invert, #fff);
  background: var(--surface-invert);
  transition: all 0.5s ease;
  border: 1px solid transparent;
}

footer .footer-container {
  min-height: 166px;
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

footer .footer-container .logos-container {
  display: flex;
  border: 1px solid white;
}
footer .footer-container .logos-container .logo-footer,
footer .footer-container .logos-container .logo-comision,
footer .footer-container .logos-container .logo-letters {
  padding: 20px;
  display: flex;
  justify-content: center;
}

footer .footer-container .logos-container .logo-comision {
  border-left: 1px solid white;
  border-right: 1px solid white;
}
footer .footer-container .middle-text {
  max-width: 550px;
  color: #fff;
  /* H5/Bold */
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 133.333% */
}

footer .footer-container .middle-text a {
  color: var(--text-text-brand-light, #3bd7ba);
  text-decoration: none;
}
footer .footer-container .middle-text a:hover {
  text-decoration: underline;
}
.social-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-footer a {
  display: flex;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

.social-footer a img:nth-child(2) {
  width: 0; /* Ancho cero por defecto */
  height: 0; /* Altura cero por defecto */
  transition: height 0.2s ease-in-out; /* Agrega una transición suave de width y height */
}

.social-footer a:hover img:nth-child(1) {
  width: 0; /* Cuando se hace hover en el enlace, establece el ancho de la primera imagen a cero */
  height: 0; /* Cuando se hace hover en el enlace, establece la altura de la primera imagen a cero */
}

.social-footer a:hover img:nth-child(2) {
  width: 50px;
  height: 50px;
}

.social-footer a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logos-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* BreadCrumbs */
#breadcrumbs .breadcrumbs-container p {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
#breadcrumbs .breadcrumbs-container p a {
  text-decoration-line: underline;
  color: var(--text-primary);
}

/* Heading */

#headingPage .heading-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#headingPage .heading-container h1 {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  margin: 0;
}
#headingPage .heading-container.page h1 {
  min-width: 400px;
}

#headingPage .heading-container .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px; /* 114.286% */
}

.custom-select {
  min-width: 246px;
  width: 246px;
  border-radius: 100px;
  border: 2px solid var(--border-primary, #1a1a1a);
  background-color: var(--surface-primary, #fff);
  --bs-form-select-bg-img: url('../assets/Icon/chevron-down.svg');
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  padding: 12px 15px;
  background-size: 23px 23px;
}
.custom-select:focus {
  border: 2px solid var(--border-primary, #1a1a1a);
  outline: 0;
  box-shadow: none;
}
.dark-mode .custom-select {
  --bs-form-select-bg-img: url('../assets/Icon/chevron-down-white.svg');
}
#searchTemplate .search-template-container {
  display: flex;
}

#searchTemplate .search-template-container .left-column {
  width: 400px;
  min-width: 400px;
  border-radius: 16px;
  background: var(--surface-secondary, #f7fef9);
  padding: 32px;
  margin-right: 142px;
  position: sticky;
  top: 200px;
  max-height: 1200px;
}
#searchTemplate .search-template-container .left-column .filter-container {
  max-height: 1050px;
  overflow-y: auto;
  padding: 10px 20px 10px 0;
}

.left-column .filter-container .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 8px;
}

.left-column .filter-container .results {
  color: var(--text-primary);
  /* Subparagraph/Normal */
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  margin-bottom: 32px;
}

.left-column .filter-container .author-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 24px;
  border: 1px solid var(--border-border-brand, #4db8a4);
  background: var(--surface-surface-secondary, #f7fef9);
  backdrop-filter: blur(2px);
  padding: 10px 16px;
  min-height: 26px;
  margin-bottom: 32px;
}

.left-column .filter-container .author-tab p {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.left-column .filter-container .author-tab svg {
  cursor: pointer;
}
.left-column .filter-container .category-list {
  margin-bottom: 64px;
}

.left-column .filter-container .category-list:last-child {
  margin: 0;
}

.left-column .filter-container .category-list .title {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 160% */
  margin-bottom: 8px;
}
.left-column .filter-container .category-list .form-check {
  padding: 4px 0;
}

.left-column .filter-container .category-list .form-check-label {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-left: 14px;
}
.left-column .filter-container .category-list .form-check-input {
  width: 24px;
  height: 24px;
  margin: 0;
}

.left-column .filter-container .category-list .more-categories {
  color: var(--text-primary, #1a1a1a);
  font-family: var(--font-family-secondary);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 16px;
  cursor: pointer;
}
#searchTemplate .list-items-container .info-item {
  padding-top: 32px;
  max-width: 780px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--divider-primary);
}
#searchTemplate .list-items-container .info-item:last-child {
  border-bottom: 0;
}

.autors-container {
  display: flex;
  align-items: center;
}

.vl {
  width: 1px;
  height: 49px;
  margin: 0 32px;
  border: 1px solid var(--divider-primary);
}

#searchTemplate .pagination {
  width: 100%;
  margin-top: 60px;
  display: flex;
  justify-content: end;
  max-height: 20px;
}

/* Define the scrollbar style */
#searchTemplate .search-template-container .left-column .filter-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Define the thumb style */
#searchTemplate .search-template-container .left-column .filter-container::-webkit-scrollbar-thumb {
  background: #4db8a4;
  border-radius: 5px;
}

#searchTemplate .search-template-container .left-column .filter-container::-webkit-scrollbar-track {
  background-color: #ebeff5;
  border: 1px solid transparent;
  border-radius: 16px;
}

.filter-mobile-container {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-radius: 8px;
  background: var(--surface-secondary);
}
.filter-mobile-container .icons {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.filter-mobile-container .content p {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 166.667% */
}

.filter-mobile-container .content p:last-child {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

/* Define the button style */
/* #searchTemplate .search-template-container .left-column .filter-container::-webkit-scrollbar-button:hover {
} */

.filter-mobile {
  border-top: 1px solid white;
  height: 100dvh;
  width: 100%;
  min-height: auto;
  position: fixed;
  transform: translateY(0px);
  z-index: 9;
  transition: all 0.9s ease;
  top: 0px;
  left: 0;
  overflow-y: auto;
  padding: 10px 16px;
  opacity: 1;
  margin: 0;
  background: var(--surface-secondary, #f7fef9);
}

.filter-mobile.hide {
  opacity: 0;
  transition: all 0.9s ease;
  transform: translateY(-2000px);
}

.filter-close-icon {
  cursor: pointer;
}

.template-modal .modal-body {
  padding: 0 32px;
}

.template-modal .title {
  color: var(--text-primary, #1a1a1a);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 150% */
  margin-bottom: 8px;
}
.template-modal .results {
  color: var(--text-primary);
  /* Subparagraph/Normal */
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  margin-bottom: 8px;
}
.template-modal .form-check {
  padding-left: 0;
  margin-bottom: 6px;
  padding: 6px 0;
}
.template-modal .form-check-input {
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 0;
}
.template-modal .form-check-label {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-left: 14px;
}

.template-modal .accordion-item {
  background-color: transparent;
  border-radius: 0 !important;
  border: none;
  box-shadow: none;
}
.template-modal .accordion-body {
  padding: 20px 0;
}

.template-modal .accordion-header {
  display: flex;
  align-items: center;
  box-shadow: none;
  border-bottom: 1px solid var(--border-disable);
  min-height: 68px;
  max-height: 68px;
}
.template-modal .accordion-header .form-check-label {
  width: 100%;
  cursor: pointer;
  padding: 10px 0;
}

.template-modal .accordion-button {
  background-color: transparent;
  border-radius: 0 !important;
  border: none;

  padding: 0;
  box-shadow: none;
}

.template-modal .m-w-370px {
  width: 370px;
  max-width: 370px;
}

.template-modal .m-w-740px {
  width: 740px;
  max-width: 740px;
}

.modal-xl {
  --bs-modal-width: 1300px;
}

.template-modal .form-check-label.collapsed .accordion-button::after {
  transform: rotate(90deg);
}

.template-modal .btn-clean {
  width: 178px;
  min-width: 178px;
  height: 48px;
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  border-radius: 100px;
  border: 2px solid var(--border-border-primary, #1a1a1a);
  background: var(--surface-surface-primary, #fff);
}
.template-modal .btn-filter {
  width: 178px;
  min-width: 178px;
  height: 48px;
  color: var(--text-text2-invert);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  border-radius: 100px;
  border: 2px solid transparent;
  background: var(--surface-brand-dark, #328374);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border: 0;
  color: #1a1a1a;
  padding: 0 8px;
}
.select2-container--default .select2-selection--multiple {
  border-radius: var(--xxl, 128px) !important;
  border: 1px solid var(--border-border-disable, #bdbdbd) !important;
  background: var(--surface-surface-primary, #fff) !important;
  padding: 10px;
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0 2px;
  border-radius: var(--Xlarge, 24px);
  border: 1px solid var(--border-border-brand, #4db8a4);
  background: var(--surface-surface-secondary, #f7fef9);
  backdrop-filter: blur(2px);
  width: 112px;
  height: 26px;
}
.select2 {
  width: 100% !important;
}
/* Ajuste del z-index para el menú desplegable de Select2 */
.select2-container--open .select2-dropdown {
  z-index: 9999 !important; /* Ajusta el valor según sea necesario */
}
.error-template {
  display: flex;
}
.error-template img {
  width: 315px;
  height: 310px;
  margin-right: 120px;
}

.error-content {
  max-width: 570px;
}

.error-template .error-content h3 {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 43px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px; /* 130.233% */
}
.error-template .error-content p {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-bottom: 64px;
}

#articleHeading .date {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 133.333% */
  margin-bottom: 32px;
}
#articleHeading .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px; /* 114.286% */
  margin-bottom: 32px;
}
#articleHeading .autors-container {
  margin-bottom: 32px;
}

.social-article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 16px 0;
  border-top: 1px solid var(--divider-primary);
  border-bottom: 1px solid var(--divider-primary);
  margin-bottom: 32px;
}
.social-article .box-container {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.social-article .box-container:last-child {
  justify-content: end;
}

.social-article .box {
  display: flex;
  align-items: center;
}
.social-article .box svg {
  margin-right: 8px;
}

.social-article .box p,
.social-article .box-text p {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  text-align: center;
}

#articleContent p {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  margin-bottom: 32px;
}

#interestCards .card-slider {
  border-radius: var(--s, 8px);
  border: 1px solid var(--border-border-primary, #1a1a1a);
  background: var(--surface-surface-primary, #fff);
  padding: 32px;
}

#subscriptionModal .modal-content {
  border-radius: 16px;
  border: 1px solid var(--border-brand);
  background: var(--surface-secondary);
}
#subscriptionModal .modal-body {
  padding: 32px;
  min-height: 350px;
}

#subscriptionModal .sub-banner-content .sub-input-container {
  justify-content: center;
}

#successSubModal .modal-body,
#subContactModal .modal-body {
  padding: 16px 32px;
}

#successSubModal .title,
#subContactModal .title {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 16px;
}

#successSubModal .text,
#subContactModal .text {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 16px;
}

#subContactModal .text a {
  display: inline-block;
  color: var(--text-brand);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  text-decoration-line: underline;
  text-transform: uppercase;
}
#aboutSection .about-container {
  display: flex;
}
#aboutSection .left-content {
  max-width: 421px;
  margin-right: 292px;
}

#aboutSection .left-content .heading-box {
  margin-bottom: 400px;
}

#aboutSection .left-content .heading-box .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px; /* 114.286% */
}

#aboutSection .left-content .heading-box .text {
  font-family: var(--font-family-secondary);
  color: var(--text-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

#aboutSection .left-content .heading-box .text.custom {
  padding: 24px 0;
}
#aboutSection .left-content .quote-box {
  position: sticky;
  top: 180px;
}

#aboutSection .left-content .quote-box .quote {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: 48px; /* 150% */
  margin-bottom: 32px;
}

#aboutSection .left-content .quote-box .quote-details .title {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}
#aboutSection .left-content .quote-box .quote-details .text {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

.about-banner-container {
  width: 100%;
  height: 424px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 65px;
}
.about-banner-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#aboutSection .right-content {
  max-width: 800px;
}
.page-item {
  margin-bottom: 120px;
}

.page-item .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 43px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px; /* 130.233% */
  padding-bottom: 32px;
  border-bottom: 1px solid var(--divider-primary);
}

.page-item .title.sm {
  font-size: 32px;
  line-height: 140%;
}
.page-item .text {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

.team-card {
  display: flex;
  align-items: center;
  padding-top: 64px;
}

.team-card .team-img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  margin-right: 32px;
}
.team-card .team-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-content .name {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 160% */
  padding: 0;
}
.team-content .role {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  margin-bottom: 16px;
}
.team-card .mail {
  display: flex;
  align-items: center;
}
.team-card .mail svg {
  margin-right: 16px;
}

.team-card .mail .mail-name {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: normal;
  text-decoration-line: underline;
  text-transform: lowercase;
  transition: all 0.5s ease;
}
.team-card .mail .mail-name:hover {
  color: var(--text-text-brand, #328374);
  transition: all 0.5s ease;
}

.keep-reading {
  color: var(--text-brand);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  cursor: pointer;
}

.page-heading-wrapper {
  display: flex;
  align-items: center;
}

.filter-btn-container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.toggle-btn-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.heading-text-page {
  max-width: 800px;
  padding: 0 10px;
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
  letter-spacing: -0.04px;
}

.results-count {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  padding: 20px 0;
}

.masonry-container {
  width: 100%;
}

.masonry-container .grid-item {
  margin-bottom: 20px;
  padding: 0 16px;
}

.masonry-container .grid-item .item {
  max-width: 100%;
  border-radius: var(--s, 8px);
  border: 1px solid var(--border-border-primary, #1a1a1a);
  background: var(--surface-surface-primary, #fff);
  padding: 32px;
  transition: all 0.5s ease;
}

.masonry-container .grid-item .item:hover {
  border: 1px solid transparent;
  transition: all 0.5s ease;
  background: var(--surface-brand-dark);
}
.masonry-container .grid-item .item:hover .date {
  transition: all 0.5s ease;
  color: var(--text-text2-invert);
}
.masonry-container .grid-item .item:hover .title {
  transition: all 0.5s ease;
  color: var(--text-text2-invert);
}
.masonry-container .grid-item .item:hover .text {
  transition: all 0.5s ease;
  color: var(--text-text2-invert);
}

.masonry-container .grid-item .item .d-flex {
  gap: 16px;
}

.masonry-container .grid-item .item:hover .d-flex svg path {
  fill: white;
}
.masonry-container .grid-item .item:hover .d-flex svg:last-child path {
  fill: transparent;
  stroke: white;
}

.masonry-container .grid-item .item .date {
  transition: all 0.5s ease;
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 133.333% */
  margin-bottom: 32px;
}
.masonry-container .grid-item .item .title {
  transition: all 0.5s ease;
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 150% */
}
.masonry-container .grid-item .item .text {
  transition: all 0.5s ease;
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  padding: 16px 0;
}

.no-margin {
  margin-right: 30px !important;
}
.card-img-container {
  width: 100%;
  height: 250px;
}
.card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body-wrapper {
  padding: 32px 16px;
}

.mediateca-img {
  width: 100%;
  height: 472px;
  margin-bottom: 34px;
}

.mediateca-container {
  min-height: 800px;
}

.mediateca-container .title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 150% */
}
.mediateca-container .description {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
  letter-spacing: -0.04px;
}
.mediateca-container .category {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mediateca-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boletin-container {
  display: flex;
  justify-content: center;
}

.boletin-template {
  max-width: 650px;
}

.static-boletin {
  max-width: 330px;
  margin-right: 100px;
}

.static-img img {
  border-radius: 8px;
  border: 1px solid var(--border-disable);
  margin-bottom: 32px;
}

.boletin-subtitle {
  color: var(--text-primary);
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 128.571% */
  margin-bottom: 16px;
}

.boletin-title {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}

.boletin-text {
  color: var(--text-secondary);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.boletin-template-img {
  width: 250px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-disable);
}

.boletin-template-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1750px) {
  .boletines .left-column {
    margin-right: 10px !important;
  }
  .static-boletin {
    margin: 10px;
  }
}

@media (max-width: 1700px) {
  .masonry {
    column-count: 2; /* Número deseado de columnas */
  }
  .logos-container {
    flex-direction: column;
  }
  .logo-letters {
    border-top: 1px solid white;
  }
  footer .footer-container .middle-text {
    max-width: 450px;
  }
}

@media (max-width: 1440px) {
  #headingPage .heading-container.page h1 {
    max-width: 100%;
  }
  #headingPage .heading-container.page {
    align-items: start;
  }
  .page-heading-wrapper {
    flex-direction: column;
    align-items: start;
    gap: 25px;
  }
  .heading-text-page {
    padding: 0;
  }
  #aboutSection .left-content {
    margin-right: 120px;
  }
  .error-template {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }

  .error-template .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
    max-width: 100%;
  }
  .error-template img {
    margin: 0;
  }
  #searchTemplate .search-template-container .left-column {
    margin-right: 50px;
  }
  .lateral-divider {
    border: none;
  }
  header {
    padding: 10px 20px;
  }
  .padding-x {
    padding-left: 20px;
    padding-right: 20px;
  }
  .padding-y {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #boletinHome .boletin-items-wrapper {
    flex-wrap: wrap;
  }
  #boletinHome .boletin-items-wrapper .boletin-item {
    width: 100%;
    max-width: 100%;
  }
  .boletin-items-wrapper .info-item {
    width: 100%;
    padding: 25px 0;
  }
}

@media (max-width: 1350px) {
  .boletin-template {
    max-width: 100%;
  }
  .static-img {
    display: flex;
    justify-content: center;
  }
  .static-boletin {
    max-width: 100%;
    margin-bottom: 20px;
  }
  .boletin-container {
    flex-direction: column;
  }
  .boletin-template-img {
    width: 95%;
  }
}

@media (max-width: 1200px) {
  #searchTemplate .list-items-container .info-item .autors-container {
    align-items: start;
    flex-direction: column;
  }

  #searchTemplate .info-item .autor-item {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--divider-primary);
  }
  #searchTemplate .info-item .autor-item:last-child {
    border-bottom: none;
  }
  .vl {
    display: none;
  }
  footer .footer-container {
    flex-wrap: wrap;
  }
  .logos-container,
  .middle-text {
    margin-bottom: 60px;
  }
  footer .social-footer {
    width: 100%;
    justify-content: center;
  }

  #suscriptionBanner .banner-container .sub-banner-content {
    max-width: 100%;
  }
  #suscriptionBanner .banner-container .sub-banner-content .sub-input-container {
    justify-content: center;
  }
  #suscriptionBanner .banner-container .sub-banner-img {
    margin-top: 40px;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-right: 0;
  }
  #suscriptionBanner .banner-container .sub-banner-img img {
    max-width: 500px;
  }
  #suscriptionBanner .banner-container {
    flex-direction: column-reverse;
  }
  #templateCarrusel .swiper-slide {
    padding: 15px;
  }
  header .logo {
    min-width: 350px;
  }
  header .logo .logo-desktop {
    width: 90%;
  }
  header .navbar-container .navbar li a {
    font-size: 15px;
  }
}
@media (max-width: 1024px) {
  header {
    height: 40px;
  }
  header .logo {
    min-width: auto;
  }
  header .search {
    display: none;
  }
  header .logo-desktop {
    display: none;
  }
  header .logo-mobile {
    width: 80%;
    display: block;
  }
  header .navbar-container {
    display: none;
  }

  header .navbar-container.mobile {
    display: flex;
    justify-content: end;
    min-width: auto;
  }
}

@media (max-width: 992px) {
  .filter-btn-container {
    flex-wrap: wrap;
    padding: 0 10px;
  }
  #aboutSection .about-container {
    flex-direction: column;
  }
  #aboutSection .left-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #aboutSection .left-content .heading-box {
    padding-bottom: 64px;
    margin-bottom: 64px;
    border-bottom: 1px solid var(--divider-primary);
  }

  #aboutSection .left-content .quote-box {
    margin-bottom: 64px;
  }
  .template-modal .m-w-370px {
    width: 100%;
    max-width: 100%;
  }

  .template-modal .m-w-740px {
    width: 100%;
    max-width: 100%;
  }
  #searchTemplate .search-template-container .left-column {
    width: 300px;
    min-width: 300px;
    margin-right: 25px;
    margin-left: 0;
  }
  footer {
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
  }
  footer .footer-container {
    flex-direction: column;
    max-width: 650px;
    width: 100%;
  }
  footer .footer-container .middle-text {
    max-width: 650px;
  }
  .logos-container,
  .middle-text,
  .social-footer {
    width: 100%;
  }

  .logo-footer svg,
  .logo-comision svg {
    width: 100%;
  }
  .logo-letters img {
    width: 100%;
  }

  footer .footer-container .logos-container .logo-comision {
    border-right: none;
  }
  #templateCarrusel .swiper-slide .card-slider .title {
    line-height: 120%;
    font-size: 24px;
  }
  #templateCarrusel .template-carrusel-container .static-topic .title {
    font-size: 45px;
  }

  #templateCarrusel .slider-container {
    padding-left: 45px;
  }
}

@media (max-width: 768px) {
  .static-img img {
    width: 95%;
  }
  .static-boletin {
    margin: 20px 0;
  }
  #searchTemplate .pagination {
    margin-top: 20px;
  }

  .masonry-container .grid-item {
    padding: 0 8px;
    margin: 0;
    margin: 10px 0;
  }
  .masonry-container .grid-item .item .title {
    font-size: 24px;
    line-height: 140%;
  }

  .masonry-container .grid-item .item {
    padding: 16px;
  }
  .select-mobile {
    width: 100%;
    padding: 8px 16px;
    margin-top: 20px;
  }
  .select-mobile select {
    width: 100%;
    text-align: center;
  }
  .page-item {
    margin-bottom: 64px;
  }
  #aboutSection .left-content .heading-box .title,
  .page-item .title {
    font-size: 32px;
    padding-bottom: 0;
  }
  .team-card {
    padding-top: 32px;
  }
  .team-content .name {
    font-size: 18px;
    line-height: 120%;
  }
  .team-content .role {
    margin-bottom: 4px;
  }
  .team-card .team-img {
    min-width: 64px;
    width: 64px;
    height: 64px;
    margin-right: 16px;
  }
  .about-banner-container {
    height: 164px;
  }
  .box-text p {
    color: var(--text-secondary);

    font-family: var(--font-family-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
    text-align: center;
    margin-bottom: 32px;
  }
  #interestCards .card-slider .title {
    font-size: 24px;
    line-height: 140%;
  }
  #interestCards .card-slider {
    padding: 24px;
  }
  #articleHeading .title {
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
  }
  .social-article .box-container {
    justify-content: space-between;
    width: 100%;
    min-width: 144px;
  }

  .error-template .error-content h3 {
    font-size: 32px;
    line-height: 140%;
  }
  .error-template .error-content p {
    margin-bottom: 32px;
  }
  .template-modal .modal-footer {
    padding: 10px 0;
    justify-content: center;
  }
  .filter-mobile-container {
    display: flex;
  }
  #searchTemplate .pagination {
    justify-content: center;
  }
  #searchTemplate .list-items-container .info-item {
    padding: 24px 0;
  }
  #headingPage .heading-container h1 {
    font-size: 32px;
    line-height: 140%;
  }

  #headingPage .heading-container .title {
    font-size: 24px;
    line-height: 140%;
  }
  #suscriptionBanner .banner-container .sub-banner-img img {
    max-width: 350px;
  }
  #suscriptionBanner .banner-container .sub-banner-content .title {
    text-align: center;
    font-size: 32px;
    line-height: 140%;
  }
  #suscriptionBanner .banner-container {
    padding: 32px 16px;
    background: #ebeff5;
  }
  #suscriptionBanner .banner-container .sub-banner-content {
    padding: 0;
  }
  #templateCarrusel .template-carrusel-container .static-topic .title {
    font-size: 32px;
    line-height: 120%;
  }
  #templateCarrusel .swiper-pagination {
    justify-content: center;
  }
  #templateCarrusel .slider-container {
    padding-left: 0;
  }
  #templateCarrusel .template-carrusel-container .static-topic {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
  #templateCarrusel .template-carrusel-container {
    flex-direction: column;
  }
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-detail {
    padding: 0 15px;
  }
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-img img {
    object-fit: cover;
  }
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-img {
    min-width: 315px;
    height: 450px;
  }
  #mainSearchBanner .search-banner-container {
    height: 361px;
  }
  #mainSearchBanner .search {
    min-width: 95%;
  }
  #suscriptionBanner .banner-container .sub-banner-content .sub-input-container {
    flex-direction: column;
  }
  #suscriptionBanner .banner-container .sub-banner-content .sub-input-container input {
    width: 70%;
  }
  #suscriptionBanner .banner-container .sub-banner-content .sub-input-container .sub-btn {
    margin-top: 16px;
    width: 70%;
  }
}

@media (max-width: 650px) {
  .masonry .item:nth-child(n + 4) {
    display: none;
  }
  .masonry {
    column-count: 1; /* Número deseado de columnas */
  }
  .info-item.lateral-divider {
    border-bottom: 1px dotted rgba(236, 236, 236, 1);
  }
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-detail .btn {
    width: 100%;
  }
  #boletinHome .boletin-items-wrapper {
    padding: 40px 0 0 0;
  }
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-img {
    width: 100%;
    min-width: 100%;
    height: auto;
    margin-bottom: 32px;
  }
  #boletinHome .boletin-items-wrapper .boletin-item {
    flex-direction: column;
    border-bottom: 1px dotted rgba(236, 236, 236, 1);
    padding-bottom: 32px;
  }
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-detail {
    padding: 0;
  }
  .info-item,
  #boletinHome .boletin-items-wrapper .boletin-item .boletin-detail {
    min-width: 100%;
  }
}

@media (max-width: 576px) {
  .boletin-template-img,
  .static-img img {
    width: 100%;
  }
  #interestCards .card-slider {
    padding: 12px;
  }
  .template-modal .modal-body {
    padding: 0 12px;
  }
  .template-modal .btn-clean {
    width: 150px;
    min-width: 150px;
  }
  .template-modal .btn-filter {
    width: 150px;
    min-width: 150px;
  }

  footer .footer-container .middle-text a {
    margin-top: 30px;
  }
  #suscriptionBanner .banner-container .sub-banner-content .title {
    text-align: start;
  }
  #suscriptionBanner .banner-container .sub-banner-content .sub-input-container input {
    width: 100%;
  }
  #suscriptionBanner .banner-container .sub-banner-content .sub-input-container .sub-btn {
    width: 100%;
  }
  /* Slider */
  #templateCarrusel .swiper-wrapper {
    flex-direction: column;
  }
  #templateCarrusel .swiper-slide {
    width: 100% !important;
    margin: 12px 0 !important;
  }
  #templateCarrusel .swiper-pagination {
    display: none;
  }
  #templateCarrusel .swiper-slide {
    display: none; /* Oculta todas las diapositivas por defecto */
  }
  #templateCarrusel .swiper-slide:nth-of-type(-n + 3) {
    display: block; /* Muestra solo las tres primeras diapositivas */
  }
  /* Slider */
  #templateCarrusel .template-carrusel-container .static-topic .text {
    margin-bottom: 20px;
  }
  /* .slider-container {
    display: none;
  } */
  .h2-heading {
    font-size: 32px;
    line-height: 120%;
    margin: 0;
  }
  header {
    padding: 10px;
  }

  header .navbar-container.mobile .search-mobile-icon {
    margin-right: 10px;
  }
}

@media (max-width: 375px) {
  .padding-x {
    padding-left: 16px;
    padding-right: 16px;
  }
  .template-modal .btn-clean {
    width: 90%;
    min-width: 90%;
  }
  .template-modal .btn-filter {
    width: 90%;
    min-width: 90%;
  }
}

@media (max-width: 320px) {
  footer .social-footer {
    justify-content: start;
  }
  #mainSearchBanner .search-txt {
    font-size: 12px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  #fixedNavbar .fixed-navbar-container ul {
    gap: 30px;
  }
  #fixedNavbar .fixed-navbar-container ul li {
    font-size: 14px;
  }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
  #fixedNavbar .fixed-navbar-container {
    display: none;
  }
}