.cmp-specialsFilter__grid-section.hidden,
.cmp-specialsFilter__list-section.hidden {
  display: none;
}

.cmp-specialsFilter[data-view="grid"] .cmp-specialsFilter__grid-section {
  display: block;
}

.cmp-specialsFilter[data-view="list"] .cmp-specialsFilter__list-section {
  display: block;
}

.cmp-specialsFilter__item[hidden],
.cmp-specialsFilter__pagination[hidden] {
  display: none!important;
}

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

.cmp-specialsFilter__title {
  color: var(--CAF-Colores-neutros-gris-900);
  font-family: var(--Heading-Mvil-H2-fontFamily);
  font-size: var(--Heading-Mvil-H2-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Heading-Mvil-H2-lineHeight);
  letter-spacing: var(--Heading-Mvil-H2-letterSpacing);
  margin: 0;
}

.cmp-specialsFilter__grid {
  justify-self: center;
}

.cmp-specialsFilter__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
}

.cmp-specialsFilter__tab {
  display: flex;
  padding: var(--space-1) var(--space-2);
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-width-1) solid var(--Celeste-500-Marca);
  color: var(--Celeste-500-Marca);
}

.is-active.cmp-specialsFilter__tab {
  display: flex;
  padding: var(--space-1) var(--space-2);
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-width-1) solid var(--Primario-600);
  background: var(--Primario-600);
  color: var(--BN-white);
}

.cmp-specialsFilter__tab img {
  filter: brightness(0) saturate(100%) invert(41%) sepia(61%) saturate(524%) hue-rotate(159deg) brightness(93%) contrast(92%);
}

.is-active.cmp-specialsFilter__tab img {
  filter: brightness(0) invert(1);
}

@media (min-width: 64rem) {
  .cmp-specialsFilter__title {
    color: var(--CAF-Colores-neutros-gris-900);
    font-family: var(--Heading-Escritorio-H2-fontFamily);
    font-size: var(--Heading-Escritorio-H2-fontSize);
    font-style: normal;
    font-weight: var(--Weights-SemiBold);
    line-height: var(--Heading-Escritorio-H2-lineHeight);
    letter-spacing: var(--Heading-Escritorio-H2-letterSpacing);
  }
  .cmp-specialsFilter__tabs {
    justify-content: flex-end;
  }
  .cmp-specialsFilter__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cmp-specialsFilter__item {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--calendario-eventos-item-width));
  max-width: var(--calendario-eventos-item-width);
  flex: 0 0 min(100%, var(--calendario-eventos-item-width));
  max-height: var(--calendario-eventos-item-height);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-width-1) solid var(--Neutros-200);
  background: var(--BN-white);
  box-shadow: var(--shadow-elev-1);
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-2-5);
  scroll-snap-align: center;
}

.cmp-specialsFilter__image {
  width: 100%;
  max-width: min(100%, var(--calendario-eventos-image-width));
  max-height: var(--calendario-eventos-image-height);
  height: auto;
  aspect-ratio: var(--calendario-eventos-image-aspect-ratio);
  object-fit: cover;
  margin-top: calc(var(--space-2-5) * -1);
  margin-bottom: calc(var(--space-2-5) * -1);
}

.cmp-specialsFilter__date {
  color: var(--CAF-Colores-neutros-gris-900);
  font-family: var(--Body-Body-3-fontFamily);
  font-size: var(--Body-Body-3-fontSize);
  font-style: normal;
  font-weight: var(--Weights-Regular);
  line-height: var(--Body-Body-3-lineHeight);
  letter-spacing: var(--Body-Body-3-letterSpacing);
}

.cmp-specialsFilter__headline {
  color: var(--Neutros-Grey-800);
  font-family: var(--Heading-Escritorio-H5-fontFamily);
  font-size: var(--Heading-Escritorio-H5-fontSize);
  font-style: normal;
  font-weight: var(--Weights-SemiBold);
  line-height: var(--Heading-Escritorio-H5-lineHeight);
  letter-spacing: var(--Heading-Escritorio-H5-letterSpacing);
  margin: 0;
}

.cmp-specialsFilter__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cmp-specialsFilter__grid .cmp-specialsFilter__item {
  width: min(100%, var(--calendario-eventos-item-width));
  max-width: var(--calendario-eventos-item-width);
  max-height: var(--calendario-eventos-item-height);
  flex: 0 0 auto;
}

.cmp-specialsFilter__grid .cmp-specialsFilter__image {
  max-width: 100%;
}

.cmp-specialsFilter__grid .cmp-specialsFilter__image {
  height: 15rem;
  max-height: none;
  /*object-fit: contain;
  height: auto;*/
  aspect-ratio: auto;
}

.cmp-specialsFilter__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: 2.25rem auto 0;
  width: 20.625rem; /* 330px */
}

.cmp-specialsFilter__page-arrow {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid #e9eff6;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cmp-specialsFilter__page-arrow img {
  width: 1rem;
  height: 1rem;
}

.cmp-specialsFilter__page-numbers {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.cmp-specialsFilter__page-number,
.cmp-specialsFilter__page-ellipsis {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375rem;
  letter-spacing: -0.0125rem;
  color: #3d4a5c;
  background: transparent;
  border: none;
}

.cmp-specialsFilter__page-ellipsis {
  width: 1.875rem; /* 30px */
  border-radius: 0.375rem;
  color: #3d4a5c;
}

.is-active.cmp-specialsFilter__page-number {
  background: var(--Primario-500-Marca, #005288);
  color: #ffffff;
}

@media (min-width: 48rem) {
  .cmp-specialsFilter__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .cmp-specialsFilter__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 48rem) {
  .cmp-specialsFilter__item {
    width: min(100%, var(--calendario-eventos-item-width-mobile));
    max-width: var(--calendario-eventos-item-width-mobile);
    height: var(--calendario-eventos-item-height-mobile);
    max-height: var(--calendario-eventos-item-height-mobile);
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .cmp-specialsFilter__grid .cmp-specialsFilter__item {
    width: min(100%, var(--calendario-eventos-item-width-mobile));
    max-width: var(--calendario-eventos-item-width-mobile);
  }
  .cmp-specialsFilter__image {
    max-width: min(100%, var(--calendario-eventos-image-width-mobile));
    max-height: var(--calendario-eventos-image-height-mobile);
    aspect-ratio: var(--calendario-eventos-image-aspect-ratio-mobile);
    margin-top: calc(var(--space-2) * -1);
    margin-bottom: calc(var(--space-2) * -1);
  }
  .cmp-specialsFilter__headline {
    font-family: var(--Heading-Mvil-H5-fontFamily);
    font-size: var(--Heading-Mvil-H5-fontSize);
    line-height: var(--Heading-Mvil-H5-lineHeight);
    letter-spacing: var(--Heading-Mvil-H5-letterSpacing);
  }
}

.cmp-specialsFilter__tab.is-active {
  display: flex;
  padding: var(--space-1) var(--space-2);
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-width-1) solid var(--Primario-600);
  background: var(--Primario-600);
  color: var(--BN-white);
}

.cmp-specialsFilter__tab img {
  filter: var(--especiales-vista-galeria-listado-tab-filter);
}

.cmp-specialsFilter__tab.is-active img {
  filter: var(--especiales-vista-galeria-listado-tab-filter-active);
}

.cmp-specialsFilter__item {
  border-radius: 0;
  border: none;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.cmp-specialsFilter__image {
  border-radius: var(--radius-20);
}

.cmp-specialsFilter__image--fallback {
  object-fit: contain;
  background-color: var(--Neutros-50, #f0f1f1);
  padding: var(--space-4, 1rem);
}

.cmp-specialsFilter__date {
  margin-top: var(--space-4);
}

.cmp-specialsFilter__page-number.is-active {
  background: var(--Primario-500-Marca);
  color: var(--CAF-Colores-neutros-full-white);
}

.cmp-specialsFilter__tags {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cmp-specialsFilter__tags a {
  color: var(--Primario-500-Marca);
  font-family: var(--Body-Body-2-fontFamily);
  font-size: var(--especiales-vista-galeria-listado-tag-font-size);
  font-style: normal;
  font-weight: var(--Weights-Bold);
  line-height: var(--especiales-vista-galeria-listado-tag-line-height);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.cmp-specialsFilter__list-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.cmp-specialsFilter__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.cmp-specialsFilter__list .cmp-specialsFilter__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "image date" "image headline" "image description" "image tags";
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: start;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  height: auto;
  max-height: none;
}

.cmp-specialsFilter__list .cmp-specialsFilter__image {
  grid-area: image;
  justify-self: center;
}

.cmp-specialsFilter__list .cmp-specialsFilter__date {
  grid-area: date;
}

.cmp-specialsFilter__list .cmp-specialsFilter__headline {
  grid-area: headline;
}

.cmp-specialsFilter__list p {
  grid-area: description;
  margin: 0;
  color: var(--Neutros-700);
  font-family: var(--Body-Body-3-fontFamily);
  font-size: var(--Body-Body-3-fontSize);
  font-style: normal;
  font-weight: var(--Weights-Medium);
  line-height: var(--Body-Body-3-lineHeight);
  letter-spacing: var(--Body-Body-3-letterSpacing);
}

.cmp-specialsFilter__list .cmp-specialsFilter__tags {
  grid-area: tags;
}

@media (max-width: 63.9375rem) {
  .cmp-specialsFilter__item {
    width: var(--especiales-vista-galeria-listado-item-width-mobile);
    max-width: var(--especiales-vista-galeria-listado-item-width-mobile);
    height: var(--especiales-vista-galeria-listado-item-height-mobile);
    max-height: var(--especiales-vista-galeria-listado-item-height-mobile);
  }
  .cmp-specialsFilter__list .cmp-specialsFilter__item {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "date" "headline" "description" "tags";
  }
  .cmp-specialsFilter__list .cmp-specialsFilter__image {
    justify-self: start;
  }
}