.ngc-carousel,
.ngc-carousel * { box-sizing: border-box; }

.ngc-carousel{
  --ngc-spv: 1.35;
  --ngc-gap: 28px;
  --ngc-pad: 44px 44px 44px 44px;
  --ngc-radius: 22px;
  --ngc-minh: 420px;
  position: relative;
  width: 100%;
}

.ngc-track{
  display:flex;
  gap: var(--ngc-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:smooth;
  padding: 0 6px 10px 6px;
  margin: 0;
  scrollbar-width:none;
}
.ngc-track::-webkit-scrollbar{ display:none; }

.ngc-slide{
  flex: 0 0 calc((100% - (var(--ngc-gap) * (var(--ngc-spv) - 1))) / var(--ngc-spv));
  scroll-snap-align:start;
  border-radius: var(--ngc-radius);
  padding: var(--ngc-pad);
  min-height: var(--ngc-minh);
  position:relative;
  overflow:hidden;
  color:#fff;
}

.ngc-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.ngc-slide > * { position:relative; z-index:1; }

.ngc-step{
  width:100px; height:100px;
  border:2px dashed rgba(255,255,255,.75);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:22px;
  margin-bottom: 26px;
}

/* Badge como imagen (sin aro ni padding; muestra solo el icono) */
.ngc-step--image{
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.ngc-step--image .ngc-step__img{
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0 !important;
}

.ngc-title{
  margin:0 0 16px 0;
  font-weight:700;
  font-size:48px;
  line-height:1.05;
  /*max-width: 18ch;*/
}

.ngc-text{
  /*max-width: 52ch;*/
  font-size:16px;
  line-height:1.6;
  opacity:.92;
}

.ngc-button{
  display:inline-flex;
  margin-top:22px;
  padding: 12px 18px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.15);
  color:#fff;
  backdrop-filter: blur(6px);
}
.ngc-button:hover{ background: rgba(255,255,255,.22); }

.ngc-nav{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:12px;
  z-index:3;
}

/* Reserva espacio superior para que las flechas queden ARRIBA del carrusel (y no se pierdan sobre la card) */
.ngc-carousel.has-nav .ngc-track{
  padding-top: 78px;
}

.ngc-nav .ngc-btn{
  width:50px; height:50px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  background: transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.ngc-nav .ngc-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.ngc-nav .ngc-btn svg{
  width:20px;
  height:20px;
  display:block;
}

@media (max-width: 1024px){
  .ngc-title{ font-size:38px; }
}

@media (max-width: 767px){
  .ngc-title{ font-size:30px; }
  .ngc-text{ font-size:15px; }
  .ngc-nav{ top:8px; right:8px; }
  .ngc-nav .ngc-btn{ width:48px; height:48px; }
  .ngc-carousel.has-nav .ngc-track{ padding-top: 64px; }
}

/* 1) Badge (número) + título + imagen derecha en la misma fila */
.ngc-slide{
  display: grid;
  grid-template-columns: 100px 1fr auto; /* badge + title + right image */
  column-gap: 24px;
  row-gap: 14px;
}

/* badge */
.ngc-slide .ngc-step{
  margin-bottom: 0;
  align-self: center;
}

/* título */
.ngc-slide .ngc-title{
  margin: 0;
  align-self: center;
  display: block;
}

/* imagen a la derecha del título */
.ngc-title-media{
  justify-self: end;
  align-self: center;
  display: flex;
}
.ngc-title-media__img{
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* texto/descripcion y botón a lo ancho */
.ngc-slide .ngc-text,
.ngc-slide .ngc-button{
  grid-column: 1 / -1;
}

/* Móvil: apilar (badge, título, imagen) */
@media (max-width: 767px){
  .ngc-slide{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ngc-title-media{
    justify-self: start;
  }
  .ngc-slide .ngc-text,
  .ngc-slide .ngc-button{
    grid-column: 1;
  }
}