/*
 * Avante · Rediseño visual del catálogo
 * Alcance: únicamente body.avante-catalog-redesign
 * No modifica el contenido ni el funcionamiento de Elementor/FiboSearch.
 */

.avante-catalog-redesign {
  --acr-ink: #071b38;
  --acr-ink-soft: #12345d;
  --acr-blue: #2d72ec;
  --acr-blue-deep: #1f60d5;
  --acr-blue-wash: #eaf2ff;
  --acr-paper: #f4f7fb;
  --acr-card: #ffffff;
  --acr-text: #12233d;
  --acr-muted: #64738c;
  --acr-line: #dce5f0;
  --acr-radius: 20px;
  --acr-shadow: 0 18px 44px rgba(7, 27, 56, 0.10);
  background: var(--acr-paper);
}

/* Hero y buscador existentes: misma información y mismo shortcode. */
.avante-catalog-redesign .ava-search {
  padding-top: clamp(64px, 7vw, 94px) !important;
  padding-bottom: clamp(60px, 7vw, 88px) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 114, 236, 0.34), transparent 31%),
    radial-gradient(circle at 92% 100%, rgba(115, 72, 210, 0.20), transparent 29%),
    linear-gradient(142deg, #05152c 0%, #09274d 62%, #071b38 100%) !important;
}

.avante-catalog-redesign .ava-search::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  right: -13%;
  bottom: -60%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 62px rgba(255, 255, 255, 0.025),
    0 0 0 126px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.avante-catalog-redesign .ava-search #ava-search-title {
  max-width: 820px !important;
  font-size: clamp(42px, 5vw, 66px) !important;
  letter-spacing: -0.052em !important;
}

.avante-catalog-redesign .ava-search__panel {
  max-width: 860px;
  border-radius: 22px;
  box-shadow: 0 26px 68px rgba(0, 8, 24, 0.34);
}

/* El contenedor Elementor continúa siendo el propietario del catálogo. */
.avante-catalog-redesign .elementor-widget-portfolio {
  --grid-column-gap: 22px !important;
  --grid-row-gap: 28px !important;
  padding-top: clamp(46px, 6vw, 82px);
  padding-bottom: clamp(80px, 9vw, 128px);
}

/* Filtros: mismas categorías, nueva presentación. */
.avante-catalog-redesign .elementor-portfolio__filters {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px !important;
  margin: 0 0 clamp(36px, 5vw, 58px) !important;
  padding: 12px !important;
  border: 1px solid rgba(220, 229, 240, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 16px 46px rgba(7, 27, 56, 0.075);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.avante-catalog-redesign .elementor-portfolio__filter {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 9px 15px !important;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--acr-muted) !important;
  background: #f2f5f9;
  font-family: "DM Sans", "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.avante-catalog-redesign .elementor-portfolio__filter:hover,
.avante-catalog-redesign .elementor-portfolio__filter:focus-visible {
  color: var(--acr-blue) !important;
  border-color: #c8d9f7;
  background: var(--acr-blue-wash);
  outline: none;
  transform: translateY(-2px);
}

.avante-catalog-redesign .elementor-portfolio__filter.elementor-active {
  color: #fff !important;
  border-color: var(--acr-ink);
  background: var(--acr-ink);
  box-shadow: 0 10px 24px rgba(7, 27, 56, 0.18);
}

/* Cuadrícula existente de Elementor. */
.avante-catalog-redesign .elementor-portfolio {
  gap: 28px 22px !important;
  align-items: start;
}

/*
 * IMPORTANTE: Elementor/Isotope controla la visibilidad de cada tarjeta con
 * `style="display:none"` inline cuando no coincide con el filtro activo.
 * Forzar `display` con !important en el propio item rompe el filtrado
 * (todas las tarjetas se quedaban visibles siempre) y descuadra el masonry,
 * lo que a su vez recortaba los títulos. Por eso NO se toca `display` aquí:
 * solo se restaura explícitamente cuando Elementor lo oculta.
 */
.avante-catalog-redesign .elementor-portfolio-item[style*="display: none"],
.avante-catalog-redesign .elementor-portfolio-item[style*="display:none"] {
  display: none !important;
}

/*
 * Elementor guarda además un "Custom CSS" heredado a nivel de widget
 * (selector `.elementor-12922 .elementor-element-7e95d091 ...`, con 5
 * clases de especificidad) que sigue vivo en la página y compite con nuestro
 * rediseño. En vez de tocar esa configuración de Elementor, repetimos nuestra
 * clase de alcance para igualar/superar esa especificidad y garantizar que
 * el nuevo diseño se aplique siempre, sin depender del orden de carga.
 */
.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--acr-line);
  border-radius: var(--acr-radius);
  background: var(--acr-card);
  box-shadow: 0 6px 20px rgba(7, 27, 56, 0.05);
  overflow: hidden;
  transition:
    transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1),
    border-color 220ms ease,
    box-shadow 280ms ease;
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item:hover,
.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item:focus-within {
  border-color: #b9ccee;
  box-shadow: var(--acr-shadow);
  transform: translateY(-6px);
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-post__thumbnail__link {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  color: var(--acr-text) !important;
  background: #fff;
  text-decoration: none !important;
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  background: #eef2f8;
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__img img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 480ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item:hover .elementor-portfolio-item__img img,
.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item:focus-within .elementor-portfolio-item__img img {
  transform: scale(1.045);
}

/* Bloque de contenido bajo la imagen: el título ya nunca se recorta. */
.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__overlay {
  order: 2;
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: #fff !important;
  color: var(--acr-text) !important;
  text-align: left !important;
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--acr-text) !important;
  font-family: "Manrope", "DM Sans", Arial, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
}

/* CTA de texto: sustituye al icono flotante anterior. */
.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__overlay::after {
  content: "Ver curso →";
  display: inline-flex;
  align-items: center;
  color: var(--acr-blue);
  font: 800 13px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: 0.01em;
  transition: color 200ms ease, transform 200ms ease;
}

.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item:hover .elementor-portfolio-item__overlay::after,
.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item:focus-within .elementor-portfolio-item__overlay::after {
  color: var(--acr-blue-deep);
  transform: translateX(3px);
}

.avante-catalog-redesign .elementor-post__thumbnail__link:focus-visible {
  outline: 3px solid var(--acr-blue);
  outline-offset: -3px;
  border-radius: calc(var(--acr-radius) - 1px);
}

@media (max-width: 1024px) {
  .avante-catalog-redesign .elementor-portfolio {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .avante-catalog-redesign .ava-search {
    padding: 52px 16px 58px !important;
  }

  .avante-catalog-redesign .ava-search__eyebrow {
    margin-bottom: 16px;
  }

  .avante-catalog-redesign .ava-search #ava-search-title {
    font-size: clamp(38px, 11.8vw, 50px) !important;
    line-height: 1.02 !important;
  }

  .avante-catalog-redesign .elementor-widget-portfolio {
    padding-top: 28px;
    padding-bottom: 82px;
  }

  .avante-catalog-redesign .elementor-portfolio__filters {
    width: calc(100vw - 24px);
    max-width: none;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px !important;
    margin: 0 calc(50% - 50vw + 12px) 32px !important;
    padding: 10px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    border-radius: 18px;
  }

  .avante-catalog-redesign .elementor-portfolio__filters::-webkit-scrollbar {
    display: none;
  }

  .avante-catalog-redesign .elementor-portfolio__filter {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .avante-catalog-redesign .elementor-portfolio {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item {
    border-radius: 18px;
  }

  .avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__overlay {
    padding: 18px 18px 16px !important;
  }

  .avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign.avante-catalog-redesign .elementor-portfolio-item__title {
    font-size: 17px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avante-catalog-redesign *,
  .avante-catalog-redesign *::before,
  .avante-catalog-redesign *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}