/* ── Filtro ──────────────────────────────────────────────────────── */

.idxp-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.idxp-filter__pill {
    display: inline-flex;
    align-items: center;
    background: #f0f0f1;
    border: none;
    border-radius: 999px;
    color: #1d2327;
    cursor: pointer;
    font: inherit;
    padding: 8px 20px;
    transition: background-color .2s ease, color .2s ease;
}

.idxp-filter__pill.is-active {
    background: #1d2327;
    color: #fff;
}

/* ── Grilla ──────────────────────────────────────────────────────── */

.idxp-grid__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.idxp-grid__item[hidden] {
    display: none;
}

/* ── Carrusel — misma mecánica que Entradas Relacionadas de
   indexdesign-elementos (flechas/paginación hermanas del .swiper, fuera
   de su overflow, para que un offset negativo no se recorte). ── */

.idxp-grid--carrusel .idxp-grid__item {
    height: auto;
}

.idxp-grid--carrusel .idxp-grid__item > .idxp-card {
    height: 100%;
}

/* Desplegables configurables y selecciones activas. */
.idxp-filter--dropdowns { width: 100%; }
.idxp-filter__controls, .idxp-filter__active { display: flex; flex-wrap: wrap; justify-content: inherit; gap: inherit; }
.idxp-filter__controls { width: 100%; }
.idxp-filter__active { max-width: 100%; }
.idxp-filter__field { display: flex; flex-direction: column; gap: 10px; flex: 1 1 240px; min-width: 0; max-width: 100%; }
.idxp-filter__label { font-size: .82em; }
.idxp-filter__select-wrap { display: block; position: relative; min-width: 0; max-width: 100%; }
.idxp-filter__arrow { position: absolute; pointer-events: none; top: 50%; inset-inline-end: var(--idxp-select-arrow-inset, 18px); width: var(--idxp-select-arrow-size, 8px); height: var(--idxp-select-arrow-size, 8px); border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.idxp-filter__select { width: 100%; min-height: 44px; font: inherit; color: inherit; background-color: #fff; border: 1px solid #DFE9EC; border-radius: 24px; padding: 12px 44px 12px 18px; padding-inline-end: max(44px, calc(var(--idxp-select-arrow-inset, 18px) + var(--idxp-select-arrow-size, 8px) + 10px)); appearance: none; -webkit-appearance: none; background-image: none; box-sizing: border-box; }
.idxp-filter__chip, .idxp-filter__clear { font: inherit; border: 1px solid #DFE9EC; border-radius: 24px; padding: 8px 16px; cursor: pointer; }
.idxp-filter__chip { background: #192D34; color: #fff; }
.idxp-filter__clear { background: transparent; color: inherit; }
.idxp-filter__active[hidden], .idxp-filter__clear[hidden], .idxp-filter__empty[hidden] { display: none; }
@media (max-width: 767px) { .idxp-filter--dropdowns .idxp-filter__field { flex-basis: 100%; } }

/* Controles sin desbordamiento: Swiper decide según el ancho actual. */
.idxp-grid__nav.swiper-button-lock, .idxp-grid__pagination.swiper-pagination-lock { display: none !important; }

/* Flechas: sin fondo propio, el reset del tema (#c36) no pinta el foco que queda tras un clic. */
.idxp-grid__nav:hover, .idxp-grid__nav:focus:not(:focus-visible) { background-color: transparent; }



/* Bucle de Elementor: el widget administra la distribución, el bucle su diseño. */
.idxp-grid__loop-item { height: 100%; min-width: 0; }
.idxp-grid__loop-item > [data-elementor-type="loop-item"] { display: flex; width: 100%; height: 100%; }
.idxp-grid__loop-item > [data-elementor-type="loop-item"] > .e-con { width: 100%; }

/* Paginación de grilla, compartiendo el formato de Blog. */
.idxp-grid__pager { margin-top: 24px; }
.idxp-pagination, .idxp-load-more { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.idxp-pagination button, .idxp-load-more button { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 0 20px; font: inherit; font-size: 14px; line-height: 1.4; border: 1px solid #DFE9EC; border-radius: 999px; color: #304951; background: #FCFDFE; cursor: pointer; transition: background .2s,color .2s,border-color .2s; }
.idxp-pagination button:hover, .idxp-pagination button:focus, .idxp-load-more button:hover, .idxp-load-more button:focus { color: #0E8BB3; background: #FCFDFE; border-color: #1FBCEE; }
.idxp-pagination button.active, .idxp-pagination button.active:hover, .idxp-pagination button.active:focus { color: #fff; background: #192D34; border-color: #192D34; }
.idxp-pagination button:focus-visible, .idxp-load-more button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.idxp-grid[aria-busy="true"] > .idxp-grid__items { opacity: .55; }
.idxp-grid__pager button:disabled { cursor: wait; }
.idxp-page-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.idxp-page-error { margin-top: 16px; }
.idxp-page-error button { margin-inline-start: 12px; }
.idxp-grid .idxp-page-empty[hidden], .idxp-grid .idxp-page-error[hidden] { display: none; }

.idxp-grid.is-checking-per-page > .idxp-grid__items { visibility: hidden; }

/* Menú propio: radio independiente del botón y selección controlable. */
.idxp-filter__term[hidden], .idxp-filter__menu[hidden] { display: none !important; }
.idxp-filter__trigger { display: block; text-align: start; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idxp-filter__trigger:focus-visible, .idxp-filter__trigger[aria-expanded="true"] { outline: 2px solid #0E8BB3; outline-offset: 2px; }
.idxp-filter__select-wrap.is-open { z-index: 20; }
.idxp-filter__menu { position: absolute; top: 100%; left: 0; width: 100%; min-width: 0; max-width: var(--idxp-menu-viewport-width, calc(100vw - 24px)); max-height: min(var(--idxp-menu-max-height, 320px), var(--idxp-menu-viewport-height, 60vh)); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; margin-top: var(--idxp-menu-gap, 8px); padding: 4px; border: 1px solid #DFE9EC; border-radius: 12px; background: #fff; color: #304951; box-shadow: 0 8px 24px rgba(25,45,52,.14); font: inherit; text-align: start; }
.idxp-filter__option { padding: 10px 14px; cursor: pointer; overflow-wrap: anywhere; border-radius: 4px; }
.idxp-filter__option[aria-selected="true"] { color: #fff; background: #192D34; }
.idxp-filter__option.is-highlighted:not([aria-selected="true"]) { background: #EEF7FA; color: #192D34; }
.idxp-filter__option[aria-disabled="true"] { opacity: .5; cursor: default; }

.idxp-filter__select-wrap.opens-up .idxp-filter__menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: var(--idxp-menu-gap, 8px); }

/* Contador de proyectos de la paginación. */
.idxp-pagination__count { margin: 0 0 12px; text-align: center; font-size: 14px; color: #304951; }

/* Carrusel: 2 px de margen de recorte a cada lado para que no se coma el borde de la primera tarjeta (empieza 0,02 px antes del límite). */
.idxp-grid--carrusel .swiper { padding-inline: 2px !important; margin-inline: -2px !important; }

/* Carrusel en celular: tarjeta compacta, con el extracto completo, para que entre en la pantalla. */
@media (max-width: 600px) {
  .idxp-grid--carrusel .idxp-card__excerpt { font-size: .88rem !important; line-height: 1.5 !important; }
  .idxp-grid--carrusel .idxp-card__block { margin-top: 8px !important; }
  .idxp-grid--carrusel .idxp-card__block-body:has(.idxp-card__badges) { padding-bottom: 4px !important; }
  .idxp-grid--carrusel .idxp-card__block-body:has(.idxp-card__cta-group) { padding-top: 12px !important; }
  .idxp-grid--carrusel .idxp-card .idxp-card__cta-group { flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px !important; margin-top: 0 !important; }
  .idxp-grid--carrusel .idxp-card__cta--internal, .idxp-grid--carrusel .idxp-card__cta--external { flex: 0 0 auto !important; width: 100% !important; justify-content: center; }
  .idxp-grid--carrusel .idxp-grid__pagination { display: none !important; }
  .idxp-grid--carrusel .idxp-card__badges { gap: 5px !important; }
  .idxp-grid--carrusel .idxp-card .idxp-card__badge { font-size: .58rem !important; letter-spacing: .05em !important; padding: 3px 8px !important; margin: 0 !important; }
  .idxp-grid--carrusel .idxp-card__image-primary img, .idxp-grid--carrusel .idxp-card__image-rollover img { aspect-ratio: 16 / 9; height: auto !important; object-fit: cover !important; object-position: center top !important; }
}
