/**

 * Rail superior — Estados (corto) · Banner categorías (largo) · LIBE en vivo (corto).

 * Altura fija; los tres bloques en fila, centrados, sin recortar el slot izquierdo.

 */



.home-cat-promo-rail {

  --promo-rail-h: 76px;

  --promo-rail-side-w: 72px;

  flex-shrink: 0;

  position: relative;

  z-index: 12;

  display: flex;

  flex-direction: row;

  align-items: stretch;

  justify-content: center;

  gap: 6px;

  width: 100%;

  height: var(--promo-rail-h);

  min-height: var(--promo-rail-h);

  max-height: var(--promo-rail-h);

  margin: 0 auto 8px;

  padding: max(6px, env(safe-area-inset-top, 0px)) 10px 0;

  box-sizing: border-box;

  overflow: hidden;

  isolation: isolate;

}



.home-cat-promo-rail:not(.home-cat-promo-rail--registro) {

  padding-right: 44px;

}



.home-cat-promo-rail__slot--side {

  flex: 0 0 var(--promo-rail-side-w);

  width: var(--promo-rail-side-w);

  min-width: var(--promo-rail-side-w);

  max-width: var(--promo-rail-side-w);

  height: var(--promo-rail-h);

  min-height: var(--promo-rail-h);

  max-height: var(--promo-rail-h);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.home-cat-promo-rail__slot--side > .ch-slot-dock__item,

.home-cat-promo-rail__slot--side > [data-promo-slot] {

  flex: 1 1 auto;

  width: 100% !important;

  height: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;

  max-height: var(--promo-rail-h) !important;

  display: flex;

  align-items: center;

  justify-content: center;

}



.home-cat-promo-rail__slot--side .ch-slot-dock__banner,

.home-cat-promo-rail__slot--side .ch-slot-dock__stage {

  width: 100% !important;

  height: 100% !important;

  min-height: 0 !important;

  max-height: var(--promo-rail-h) !important;

  border-radius: 10px;

  margin: 0 auto;

}



.home-cat-promo-rail__slot--side .ch-slot-dock__banner--rail {

  box-shadow: 0 3px 10px rgba(233, 30, 99, .18);

}



.home-cat-promo-rail__slot--side .ch-slot-dock__mock-bg {

  position: absolute;

  inset: 0;

  border-radius: inherit;

}



.home-cat-promo-rail__slot--side .ch-slot-dock__mock-bg--estados {

  background: linear-gradient(145deg, #ff6b9d 0%, #e91e63 48%, #c2185b 100%);

}



.home-cat-promo-rail__slot--side .ch-slot-dock__mock-bg--libe {

  background: linear-gradient(145deg, #2a1a35 0%, #1a1028 55%, #0f0a18 100%);

}



.home-cat-promo-rail__slot--side .ch-slot-dock__img--mock,
.home-cat-promo-rail__slot--side .ch-slot-dock__img.ch-media-ph,
.home-cat-promo-rail__slot--side .ch-media-ph {

  object-fit: contain !important;

  object-position: center center !important;

  width: 100% !important;

  height: 100% !important;

  max-width: 100% !important;

  max-height: 100% !important;

  padding: 3px 2px 14px;

  box-sizing: border-box;

}



.home-cat-promo-rail__slot--side .ch-slot-dock__slot-kind {

  position: absolute;

  top: 3px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 3;

  padding: 1px 5px;

  border-radius: 999px;

  background: rgba(0, 0, 0, .5);

  color: #fff;

  font-size: 5px;

  font-weight: 800;

  letter-spacing: .05em;

  text-transform: uppercase;

  line-height: 1.2;

  white-space: nowrap;

  pointer-events: none;

}



.home-cat-promo-rail__slot--side .ch-slot-dock__vacant {

  position: absolute;

  left: 50%;

  bottom: 3px;

  right: auto;

  transform: translateX(-50%);

  z-index: 3;

  padding: 2px 5px;

  border-radius: 999px;

  background: rgba(233, 30, 99, .94);

  color: #fff;

  font-size: 5px;

  font-weight: 800;

  letter-spacing: .02em;

  line-height: 1.15;

  white-space: nowrap;

  pointer-events: none;

}



.home-cat-promo-rail__slot--side .ch-slot-dock__vacant-hint {

  display: none;

}



.home-cat-promo-rail__slot--center {

  flex: 1 1 auto;

  min-width: 0;

  max-width: min(100%, 560px);

  height: var(--promo-rail-h);

  min-height: var(--promo-rail-h);

  max-height: var(--promo-rail-h);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ── Banner central compacto ── */

.home-cat-promo-rail .registro-banner-shell--rail {

  padding: 0 !important;

  margin: 0 auto !important;

  width: 100%;

  height: 100%;

  max-height: var(--promo-rail-h);

  overflow: hidden;

}



.home-cat-promo-rail .registro-banner-top--rail {

  width: 100% !important;

  max-width: none !important;

  margin: 0 auto !important;

  padding: 0 !important;

  height: 100% !important;

  max-height: var(--promo-rail-h) !important;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb {

  display: block;

  width: 100% !important;

  height: 100% !important;

  max-height: var(--promo-rail-h) !important;

  border-radius: 11px;

  border-width: 1px;

  overflow: hidden !important;

  margin: 0 auto;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__stage {

  position: relative !important;

  width: 100% !important;

  height: var(--promo-rail-h) !important;

  min-height: var(--promo-rail-h) !important;

  max-height: var(--promo-rail-h) !important;

  aspect-ratio: unset !important;

  border-radius: 11px;

  overflow: hidden !important;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__slide,

.home-cat-promo-rail .registro-banner-top--rail .registro-pb__slide--rail-vacant {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  display: block !important;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__rail-bg,

.home-cat-promo-rail .registro-banner-top--rail .registro-pb__slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  display: block;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__rail-shade {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .42) 100%);

  pointer-events: none;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__rail-copy {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding: 4px 10px;

  box-sizing: border-box;

  pointer-events: none;

  text-align: center;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__rail-title {

  font-size: clamp(9px, 2.6vw, 12px);

  font-weight: 800;

  letter-spacing: .03em;

  color: #fff;

  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);

  line-height: 1.15;

}



.home-cat-promo-rail .registro-banner-top--rail .registro-pb__rail-hint {

  font-size: clamp(6px, 1.8vw, 8px);

  font-weight: 700;

  color: rgba(255, 255, 255, .94);

  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);

  line-height: 1.2;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



@media (max-width: 360px) {

  .home-cat-promo-rail {

    --promo-rail-h: 68px;

    --promo-rail-side-w: 64px;

    gap: 4px;

    padding-left: 8px;

  }



  .home-cat-promo-rail:not(.home-cat-promo-rail--registro) {

    padding-right: 40px;

  }

}


