/* ============================================================
   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, #222222c4 0%, rgb(151 71 255 / 36%) 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:    1440px !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:  1440px !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;
}
/* Ícono SUBIDO por el admin: mismo blanqueo SOLO en estado activo (en reposo
   conserva su color normal). Cubre el <img class="avx-chip-img"> del ícono subido. */
html body .avx-cz .avx-chip.is-active .ic img.avx-chip-img {
  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: 1440px !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;
  /* Estiramiento EXPLÍCITO de las celdas (no depender del default): cada card
     iguala la altura de la fila (la más alta manda). */
  align-items:           stretch !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;
  /* PROHIBIDO `container-type: inline-size` (v1.0.15): imponía size/layout
     containment y en móvil, dentro de los flex de Elementor, las cards no
     encogían y desbordaban. El FLIP 3D NO lo necesita: usa perspective +
     preserve-3d + backface-visibility (todo independiente de container-type). */
  perspective:      1400px !important;
  border-radius:    var(--avx-card-radius) !important;
  min-width:        0 !important;
  /* Altura uniforme: la card se ESTIRA a la altura de su celda vía align-self
     (grid y flex del carrusel llevan align-items:stretch). Se usa align-self, NO
     height:100% (frágil sobre un grid item). Es flex column para que .avx-flip
     crezca (flex:1) y llene toda la card estirada → todas las cards de la
     fila/carrusel miden lo mismo, con título de 1 o 2 líneas. */
  align-self:       stretch !important;
  display:          flex !important;
  flex-direction:   column !important;
  /* fondo/borde/sombra/overflow viven ahora en .avx-face (para el giro 3D). */
}

/* ── Flip 3D "moneda" (Ver más) ──────────────────────────────── */
/* Contenedor que gira sobre el eje Y. El anverso va en flujo (define la altura);
   el reverso se superpone volteado. El giro lo dispara la clase .is-open que el
   JS (initVerMas) ya pone/quita en .avx-card. */
html body .avx-cz .avx-flip {
  position:        relative !important;
  width:           100% !important;
  /* Llena toda la altura de la card (flex:1 dentro de .avx-card flex-column) y es
     flex column para estirar la cara frontal. El reverso es absolute → no entra en
     el flujo flex, así que la altura la define el anverso, como antes. */
  flex:            1 1 auto !important;
  min-height:      0 !important;
  display:         flex !important;
  flex-direction:  column !important;
  transform-style: preserve-3d !important;
  transition:      transform .7s cubic-bezier(.6,.02,.28,1) !important;
  will-change:     transform !important;
}
html body .avx-cz .avx-card.is-open .avx-flip {
  transform: rotateY(180deg) !important;
}

/* Cada cara lleva el look de la card (fondo/borde/sombra/radius) + oculta su
   reverso durante el giro. Border coloreado por especialización: el renderer
   inyecta --avx-espec-border inline en .avx-card y aquí se HEREDA (var). */
html body .avx-cz .avx-face {
  background:                #fff !important;
  border:                    2px 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;
  -webkit-backface-visibility: hidden !important;
  backface-visibility:       hidden !important;
}
/* La cara frontal crece para llenar el flip (y por tanto toda la card estirada);
   dentro, .avx-body (flex:1) + .avx-price-box (margin-top:auto) anclan el precio/
   botón abajo → misma altura con título de 1 o 2 líneas. */
html body .avx-cz .avx-face--front {
  flex:       1 1 auto !important;
  min-height: 0 !important;
}
/* El reverso ocupa el mismo hueco que el anverso, volteado 180°. */
html body .avx-cz .avx-face--back {
  position:  absolute !important;
  inset:     0 !important;
  transform: rotateY(180deg) !important;
}

/* Media + overlay */
html body .avx-cz .avx-media {
  position:        relative !important;
  /* No se estira dentro del flex column de la cara: mantiene su aspect-ratio y la
     altura extra la absorbe .avx-body (que ancla precio/botón abajo). */
  flex:            0 0 auto !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;
}
/* En hover, los logos de institución también se desvanecen (junto al overlay).
   opacity (no display:none) preserva el layout: los badges siguen anclados. */
html body .avx-cz .avx-card:hover .avx-logo,
html body .avx-cz .avx-card:focus-within .avx-logo {
  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;
  /* Dos logos → uno a cada esquina (izq/der). Con un solo logo, space-between lo
     deja a la izquierda igual que antes (no cambia). width:100% da el ancho para
     separarlos a los extremos de la zona de logos. */
  width:           100% !important;
  justify-content: space-between !important;
  transition:      opacity .45s ease !important;   /* acompaña el fade del overlay en hover */
}
html body .avx-cz .avx-logo img {
  height:  34px !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:           var(--avx-badge-bg, 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 1 auto !important;
  min-height:     0 !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-wrap:       wrap !important;
  align-items:     baseline !important;
  justify-content: center !important;
  gap:             6px !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 {
  flex-basis:       100% !important;   /* el tachado baja a su propia línea, debajo del precio+moneda */
  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;
  /* Cuando el carrito es enlace (misma acción que "Inscribirme ahora"): clicable
     y sin subrayado. En el span decorativo estas reglas son inocuas. Tamaño/
     posición del ícono NO cambian. */
  cursor:          pointer !important;
  text-decoration: none !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;
}

/* ── Reverso (Ver más) — contenido de la cara trasera del flip ─── */
/* Ya NO es un panel que sube con translateY: vive dentro de .avx-face--back, que
   es quien se voltea con el flip 3D. Ocupa toda la cara (height:100%) y scrollea
   internamente si el reverso (incluye el rating v1.2.18) excede la altura del
   anverso → misma altura disponible que antes, sin corte nuevo. */
html body .avx-cz .avx-detail {
  height:         100% !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;
}
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: 1440px !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:       1440px !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; }
}

/* ── [avanxa_sugerencias_titulo] — título dinámico ───────────── */
/* Scopeado bajo .avx-cz + !important (patrón del plugin). La palabra dinámica
   [X] lleva su propia clase (.avx-sug-title-cat) para poder ajustarla aparte.
   "Visby" es la fuente pedida; el fallback sans-serif solo actúa si no carga. */
html body .avx-cz .avx-sug-title {
  color:        #222222 !important;
  font-family:  "Visby", sans-serif !important;
  font-size:    32px !important;
  font-weight:  700 !important;
  line-height:  1.3 !important;
}
html body .avx-cz .avx-sug-title-cat {
  color:         #F0E5F9 !important;
  background:    #222222 !important;
  border-radius: 2px !important;
  padding:       0 4px !important;
}

/* ── Rating (estrella + puntaje) — encima del título de la card ─────────────── */
/* Scopeado bajo .avx-cz + !important (patrón del plugin). El PNG (star.png) se
   sirve desde dentro del plugin; NO se colorea (ya trae su color). El número va
   en #676767, Inter regular, 13px. Sin reseñas el renderer no emite este bloque. */
html body .avx-cz .avx-rating {
  display:       flex !important;
  align-items:   center !important;
  gap:           4px !important;
  margin-bottom: 6px !important;
}
html body .avx-cz .avx-rating img {
  height:  15px !important;
  width:   auto !important;
  display: block !important;
}
html body .avx-cz .avx-rating span {
  color:       #676767 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  font-size:   13px !important;
  line-height: 1 !important;
}