/* ============================================================
   Avanxa Feed de Productos — Frontend CSS
   Replicado de aiep-catalogo_8.html · Todas las propiedades
   llevan !important para neutralizar sobreescrituras de Elementor.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
html body .avx-cz {
  --avx-font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --avx-title:       #545454 !important;
  --avx-price:       #3d3d3d !important;
  --avx-price-old:   #f00510 !important;
  --avx-meta:        #676767 !important;
  --avx-muted:       #676767 !important;
  --avx-purple:      #551D87 !important;
  --avx-purple-deep: #471C70 !important;
  --avx-lime:        #E3F853 !important;
  --avx-border:      #DFDFDF !important;
  --avx-btn-border:  #adadad !important;
  --avx-btn-fg:      #4F4F4F !important;
  --avx-overlay:     linear-gradient(180deg, #222222F3 0%, #9747FF80 100%) !important;
  --avx-card-radius: 16px !important;
  --avx-gap:         18px !important;
}

/* ── Reset local ─────────────────────────────────────────────── */
html body .avx-cz,
html body .avx-cz * {
  box-sizing:  border-box !important;
  margin:      0 !important;
  padding:     0 !important;
}
html body .avx-cz {
  font-family:              var(--avx-font) !important;
  color:                    var(--avx-title) !important;
  background:               transparent !important;
  -webkit-font-smoothing:   antialiased !important;
  text-rendering:           optimizeLegibility !important;
  /* Contención: nunca exceder el contenedor padre (Elementor usa flexbox por
     defecto; min-width:0 permite que el feed encoja en lugar de desbordar). */
  max-width:                100% !important;
  min-width:                0 !important;
}

/* ── Label categorías ────────────────────────────────────────── */
html body .avx-cz .avx-cat-label {
  max-width:    1080px !important;
  margin:       0 auto 8px !important;
  padding:      0 6px !important;
  font-family:  var(--avx-font) !important;
  font-size:    14px !important;
  font-weight:  500 !important;
  color:        var(--avx-meta) !important;
}

/* ── Barra de filtros ────────────────────────────────────────── */
html body .avx-cz .avx-filterbar {
  position:   relative !important;
  max-width:  1200px !important;
  margin:     0 auto 26px !important;
  padding:    0 6px !important;
}
html body .avx-cz .avx-fb-viewport {
  overflow-x:                 auto !important;
  scrollbar-width:            none !important;
  -ms-overflow-style:         none !important;
  scroll-behavior:            smooth !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .avx-cz .avx-fb-viewport::-webkit-scrollbar {
  display: none !important;
  height:  0 !important;
}
html body .avx-cz .avx-fb-track {
  display:  flex !important;
  gap:      12px !important;
  padding:  4px 64px !important;
  width:    max-content !important;
}

/* Chips */
html body .avx-cz .avx-chip {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             8px !important;
  padding:         4px !important;
  border:          1px solid var(--avx-purple) !important;
  border-radius:   50px !important;
  background:      #FAFAFA !important;
  color:           var(--avx-purple) !important;
  font-family:     var(--avx-font) !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  white-space:     nowrap !important;
  width:           max-content !important;
  cursor:          pointer !important;
  text-transform:  none !important;
  transition:      .2s ease-in-out !important;
}
html body .avx-cz .avx-chip,
html body .avx-cz .avx-chip span {
  text-transform: none !important;
}
html body .avx-cz .avx-chip > span:last-child {
  padding-right: 12px !important;
}
html body .avx-cz .avx-chip .ic {
  width:           32px !important;
  height:          32px !important;
  flex:            0 0 auto !important;
  border:          1px solid #551D87 !important;
  border-radius:   50px !important;
  background:      #471C701A !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
}
html body .avx-cz .avx-chip:hover {
  box-shadow: 0 5px 16px rgba(85,29,135,.22) !important;
}
html body .avx-cz .avx-chip.is-active {
  background:    var(--avx-purple-deep) !important;
  border-color:  var(--avx-purple-deep) !important;
  color:         #fff !important;
}
html body .avx-cz .avx-chip.is-active .ic {
  background:   rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.45) !important;
}
/* SVG de categoría: se invierte a blanco cuando el chip está activo */
html body .avx-cz .avx-chip.is-active .ic img.avx-chip-svg {
  filter: brightness(0) invert(1) !important;
}

/* Flechas de nav */
html body .avx-cz .avx-fb-nav {
  position:        absolute !important;
  top:             50% !important;
  transform:       translateY(-50%) !important;
  width:           56px !important;
  height:          56px !important;
  border-radius:   50px !important;
  background:      #fff !important;
  border:          none !important;
  box-shadow:      0px 4px 12px 0px #902E9D40 !important;
  opacity:         1 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  color:           #6b6b6b !important;
  z-index:         3 !important;
  transition:      color .2s ease, box-shadow .2s ease !important;
}
html body .avx-cz .avx-fb-nav:hover { color: var(--avx-purple-deep) !important; }
html body .avx-cz .avx-fb-prev { left:  -8px !important; }
html body .avx-cz .avx-fb-next { right: -8px !important; }

/* ── Grid de tarjetas ────────────────────────────────────────── */
html body .avx-cz .avx-grid-wrap {
  max-width: 1200px !important;
  width:     100% !important;
  min-width: 0 !important;
  margin:    0 auto !important;
}
html body .avx-cz .avx-grid {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   var(--avx-gap) !important;
}
/* Items de grid: min-width:0 evita que el contenido fuerce el track más ancho
   que la columna (causa típica de desborde horizontal en móvil). */
html body .avx-cz .avx-grid > .avx-card {
  min-width: 0 !important;
}

/* ── Tarjeta ─────────────────────────────────────────────────── */
html body .avx-cz .avx-card {
  position:         relative !important;
  /* NOTA: se eliminó `container-type: inline-size`. Era código muerto (ninguna
     @container query del feed lo usaba) pero imponía size/layout containment +
     nuevo contexto de formato a cada card, causando que en móvil, dentro de los
     contenedores flex de Elementor, las cards no encogieran al padre y se
     desbordaran. `position:relative` se conserva (lo usa el panel .avx-detail). */
  background:       #fff !important;
  /* Border coloreado por especialización: el renderer inyecta --avx-espec-border
     inline solo cuando el término tiene meta 'color'; sin ella, cae al #eee. */
  border:           1px solid var(--avx-espec-border, #eee) !important;
  border-radius:    var(--avx-card-radius) !important;
  box-shadow:       0 8px 22px -12px rgba(40,20,70,.20) !important;
  overflow:         hidden !important;
  display:          flex !important;
  flex-direction:   column !important;
  min-width:        0 !important;
}

/* Media + overlay */
html body .avx-cz .avx-media {
  position:        relative !important;
  aspect-ratio:    1.5 / 1 !important;
  background-color:    transparent !important;
  background-size:     cover !important;
  background-position: center !important;
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: space-between !important;
  padding:         14px !important;
  overflow:        hidden !important;
}
html body .avx-cz .avx-media::before {
  content:          "" !important;
  position:         absolute !important;
  inset:            0 !important;
  background-image: var(--avx-overlay) !important;
  transition:       opacity .45s ease !important;
  z-index:          1 !important;
}
html body .avx-cz .avx-card:hover .avx-media::before,
html body .avx-cz .avx-card:focus-within .avx-media::before {
  opacity: 0 !important;
}

/* Logo institución */
html body .avx-cz .avx-logo {
  position:    relative !important;
  z-index:     2 !important;
  display:     flex !important;
  gap:         8px !important;
  align-items: center !important;
}
html body .avx-cz .avx-logo img {
  height:  26px !important;
  width:   auto !important;
  display: block !important;
  filter:  drop-shadow(0 1px 2px rgba(0,0,0,.25)) !important;
}

/* Badges */
html body .avx-cz .avx-badges {
  position:   relative !important;
  z-index:    2 !important;
  display:    flex !important;
  flex-wrap:  wrap !important;
  gap:        7px !important;
}
html body .avx-cz .avx-badge {
  display:              inline-flex !important;
  align-items:          center !important;
  gap:                  5px !important;
  font-family:          var(--avx-font) !important;
  font-size:            11px !important;
  font-weight:          700 !important;
  color:                #454545 !important;
  text-transform:       uppercase !important;
  letter-spacing:       .2px !important;
  padding:              5px 10px !important;
  border-radius:        999px !important;
  background:           rgba(255,255,255,.85) !important;
  backdrop-filter:      blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow:           0 1px 3px rgba(0,0,0,.12) !important;
  white-space:          nowrap !important;
}

/* ── Cuerpo (frente) ─────────────────────────────────────────── */
html body .avx-cz .avx-body {
  padding:        16px !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            14px !important;
  flex:           1 !important;
}
html body .avx-cz .avx-card-title {
  font-family:           var(--avx-font) !important;
  font-size:             18px !important;
  font-weight:           600 !important;
  line-height:           24px !important;
  color:                 var(--avx-title) !important;
  display:               -webkit-box !important;
  -webkit-line-clamp:    4 !important;
  -webkit-box-orient:    vertical !important;
  overflow:              hidden !important;
}

/* Meta rows */
html body .avx-cz .avx-meta {
  display:        flex !important;
  flex-direction: column !important;
  gap:            7px !important;
}
html body .avx-cz .avx-meta-row {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  font-family: var(--avx-font) !important;
  font-size:   14px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  color:       var(--avx-meta) !important;
}
html body .avx-cz .avx-meta-row b {
  font-weight: 600 !important;
  color:       var(--avx-meta) !important;
}

/* Precio */
html body .avx-cz .avx-price-box {
  position:        relative !important;
  margin-top:      auto !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border:          1px solid var(--avx-border) !important;
  border-radius:   4px !important;
  padding:         8px 12px !important;
}
html body .avx-cz .avx-price-info {
  display:        flex !important;
  flex-direction: column !important;
  gap:            1px !important;
  text-align:     center !important;
}
html body .avx-cz .avx-price-cur {
  font-family: var(--avx-font) !important;
  font-size:   18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color:       var(--avx-price) !important;
}
html body .avx-cz .avx-price {
  font-family: var(--avx-font) !important;
  font-size:   18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color:       var(--avx-price) !important;
}
html body .avx-cz .avx-price-old {
  font-family:      var(--avx-font) !important;
  font-size:        14px !important;
  font-weight:      500 !important;
  line-height:      22px !important;
  color:            var(--avx-price-old) !important;
  text-decoration:  line-through !important;
}
html body .avx-cz .avx-cart {
  position:  absolute !important;
  right:     12px !important;
  top:       50% !important;
  transform: translateY(-50%) !important;
  color:     #3d3d3d !important;
  display:   inline-flex !important;
}

/* CTA Conocer programa */
html body .avx-cz .avx-cta-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    background: #fff !important;
    border: 2px solid var(--avx-btn-border) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-family: var(--avx-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    color: var(--avx-btn-fg) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
html body .avx-cz .avx-cta-card:hover {
  background:   #4F4F4F !important;
  border-color: #4F4F4F !important;
  color:        #fff !important;
}

/* Enlace "Ver más" */
html body .avx-cz .avx-vermas {
  align-self:    flex-end !important;
  margin-top:    -2px !important;
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           5px !important;
  font-family:   var(--avx-font) !important;
  font-size:     14px !important;
  font-weight:   500 !important;
  line-height:   20px !important;
  color:         var(--avx-muted) !important;
  text-decoration: none !important;
  cursor:        pointer !important;
  transition:    color .2s ease !important;
}
html body .avx-cz .avx-vermas:hover { color: var(--avx-purple) !important; }
/* Solo "Ver más" va en mayúscula (botón open de SC1 + enlace de SC2). "Ver menos" no. */
html body .avx-cz .avx-vermas[data-act="open"],
html body .avx-cz .avx-vermas--link {
  text-transform: uppercase !important;
}

/* ── Panel desplegable (Ver más) ─────────────────────────────── */
html body .avx-cz .avx-detail {
  position:       absolute !important;
  inset:          0 !important;
  background:     #ffffff !important;
  border:         1px solid #ADADAD !important;
  border-radius:  16px !important;
  padding:        20px !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            12px !important;
  overflow-x:     hidden !important;
  overflow-y:     auto !important;
  transform:      translateY(100%) !important;
  transition:     transform .42s cubic-bezier(.22,.61,.36,1) !important;
  z-index:        5 !important;
}
html body .avx-cz .avx-card.is-open .avx-detail {
  transform: translateY(0) !important;
}
html body .avx-cz .avx-detail > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
html body .avx-cz .avx-detail-title {
  font-family: var(--avx-font) !important;
  font-size:   18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color:       var(--avx-title) !important;
}
html body .avx-cz .avx-detail-div {
  border:     none !important;
  border-top: 1px solid #ececec !important;
}
html body .avx-cz .avx-detail-desc {
  font-family:         var(--avx-font) !important;
  font-size:           16px !important;
  font-weight:         400 !important;
  line-height:         24px !important;
  color:               #545454 !important;
  display:             -webkit-box !important;
  -webkit-line-clamp:  6 !important;
  -webkit-box-orient:  vertical !important;
  overflow:            hidden !important;
}
html body .avx-cz .avx-features {
  display:         flex !important;
  flex-wrap:       nowrap !important;
  justify-content: space-between !important;
  align-items:     center !important;
  gap:             10px !important;
  min-width:       0 !important;
  max-width:       100% !important;
  margin-top:      2px !important;
}
html body .avx-cz .avx-feature {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         6px !important;
  min-width:   0 !important;
  white-space: nowrap !important;
  font-family: var(--avx-font) !important;
  font-size:   13px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  color:       #676767 !important;
}

/* Botón Inscribirme */
html body .avx-cz .avx-enroll {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             6px !important;
  width:           100% !important;
  margin-top:      auto !important;
  background:      #e3f853 !important;
  color:           #222222 !important;
  border:          2px solid #D1D1D1 !important;
  border-radius:   10px !important;
  padding:         12px !important;
  font-family:     var(--avx-font) !important;
  font-size:       16px !important;
  font-weight:     700 !important;
  line-height:     24px !important;
  text-transform:  uppercase !important;
  letter-spacing:  .04px !important;
  white-space:     nowrap !important;
  text-decoration: none !important;
  min-width:       0 !important;
  max-width:       100% !important;
  cursor:          pointer !important;
  transition:      background .2s ease, color .2s ease, transform .15s ease !important;
}
html body .avx-cz .avx-enroll:hover {
  background: #222222 !important;
  color:      #e3f853 !important;
}
html body .avx-cz .avx-enroll:active { transform: translateY(1px) !important; }
html body .avx-cz .avx-enroll svg {
  width:   16px !important;
  height:  16px !important;
  flex:    0 0 auto !important;
  display: inline-block !important;
}
html body .avx-cz .avx-enroll-sub {
  text-align:  center !important;
  font-family: var(--avx-font) !important;
  font-size:   13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  color:       #222222 !important;
}

/* ── SC2 carrusel ────────────────────────────────────────────── */
html body .avx-cz .avx-carousel {
  position:  relative !important;
  max-width: 1200px !important;
  margin:    0 auto !important;
  padding:   0 !important;
}
/* Con flechas (>4 productos): el viewport SIGUE a ancho completo (las cards
   conservan exactamente el mismo ancho que en SC1). Las flechas no se meten
   por dentro con padding (eso encogía las cards, que miden en %); se sacan
   por FUERA del box con offsets negativos — igual idea que las flechas de los
   chips, pero más afuera para no tapar ninguna card. Ver .avx-fb-prev/next. */
html body .avx-cz .avx-carousel-viewport {
  overflow-x:                 auto !important;
  scrollbar-width:            none !important;
  -ms-overflow-style:         none !important;
  scroll-behavior:            smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type:           x mandatory !important;
}
html body .avx-cz .avx-carousel-viewport::-webkit-scrollbar {
  display: none !important;
  height:  0 !important;
}
html body .avx-cz .avx-sc2-grid {
  display:     flex !important;
  gap:         var(--avx-gap) !important;
  align-items: stretch !important;
  padding:     4px 0 !important;
}
/* 4 cards completas dentro del viewport (sin cortar el borde).
   scroll-snap mantiene las cards alineadas al desplazar. */
html body .avx-cz .avx-sc2-grid .avx-card {
  flex:              0 0 calc((100% - 54px) / 4) !important;
  scroll-snap-align: start !important;
  min-width:         0 !important;
}
/* Flechas: ocultas por defecto, visibles solo con >4 productos (has-nav). */
html body .avx-cz .avx-carousel .avx-fb-nav { display: none !important; }
html body .avx-cz .avx-carousel.has-nav .avx-fb-nav { display: inline-flex !important; }
/* Flechas FUERA del box: la flecha (56px) queda en el margen exterior del
   carrusel, dejando ~8px de aire antes de la primera/última card. El viewport
   no pierde ancho → cards idénticas a SC1. */
html body .avx-cz .avx-carousel .avx-fb-prev { left:  -64px !important; }
html body .avx-cz .avx-carousel .avx-fb-next { right: -64px !important; }

/* Pie de SC2 (contador + hint): OCULTO en escritorio, visible en ≤1024px. */
html body .avx-cz--sc2 .avx-sc2-foot {
  display:         none !important;
  justify-content: space-between !important;
  align-items:     center !important;
  gap:             12px !important;
  max-width:       1200px !important;
  margin:          12px auto 0 !important;
  font-family:     var(--avx-font) !important;   /* Inter */
  font-size:       14px !important;
  font-weight:     500 !important;               /* medium */
  line-height:     20px !important;
  color:           #551D87 !important;
}
/* X y N: mismo color y peso medium que el resto del pie. */
html body .avx-cz--sc2 .avx-sc2-counter b {
  font-weight: 500 !important;
  color:       #551D87 !important;
}
html body .avx-cz--sc2 .avx-sc2-hint {
  color:       #551D87 !important;
  white-space: nowrap !important;
}

/* ── SC2 en TABLET/MÓVIL (≤1024px): carrusel SWIPE, sin flechas ───
   El carrusel táctil (scroll-snap) reemplaza a las flechas. TABLET (641–1024px):
   2 cards completas a la vez; MÓVIL (≤640px): 1 card a ancho completo. En ambos,
   sin "peek" de card parcial. El pie muestra "X de N programas" + "Desliza para
   ver más". DESKTOP queda intacto (este bloque no aplica). */
@media (max-width: 1024px) {
  html body .avx-cz--sc2 .avx-carousel {
    padding:  0 !important;
    overflow: visible !important;
  }
  /* El viewport mantiene scroll-snap horizontal (swipe táctil). */
  html body .avx-cz--sc2 .avx-carousel-viewport {
    overflow-x:       auto !important;
    scroll-snap-type: x mandatory !important;
  }
  /* TABLET: 2 cards completas. Ancho = (100% - 1 gap)/2 → 2 cards + el gap
     intermedio suman exactamente el viewport, sin que se asome una 3ª parcial. */
  html body .avx-cz--sc2 .avx-sc2-grid .avx-card {
    flex:              0 0 calc((100% - var(--avx-gap)) / 2) !important;
    width:             auto !important;
    min-width:         0 !important;
    scroll-snap-align: start !important;
  }
  /* Ocultar flechas SOLO de SC2 aunque tenga has-nav (misma especificidad que
     la regla de escritorio, pero declarada después → gana dentro del media). */
  html body .avx-cz--sc2 .avx-carousel .avx-fb-nav,
  html body .avx-cz--sc2 .avx-carousel.has-nav .avx-fb-nav {
    display: none !important;
  }
  /* Mostrar el pie (contador + hint). */
  html body .avx-cz--sc2 .avx-sc2-foot { display: flex !important; }
}

/* ── Responsive general (SC1 grid + contención) ──────────────── */
@media (max-width: 1024px) {
  html body .avx-cz .avx-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* (SC1 dejó de ser un grid: ahora es el mismo carrusel SWIPE que SC2 vía
     .avx-cz--sc2, así que ya NO lleva overflow-x:clip — eso impediría el
     deslizamiento horizontal. El grid 2-cols de arriba aplica al grid de
     archive de Fase 2 [data-sc="archive"], no a SC1.) */
}
@media (max-width: 640px) {
  html body .avx-cz  { padding: 24px 16px !important; }
  html body .avx-cz .avx-grid { grid-template-columns: 1fr !important; }
  /* MÓVIL: SC2 vuelve a 1 card a ancho completo (override del 2-cards de tablet). */
  html body .avx-cz--sc2 .avx-sc2-grid .avx-card { flex: 0 0 100% !important; }
}