/* -------- Carrusel "banner-start-lg" (desktop) -------- */

.banner-start-lg {
    background: #f3f5f8;
    padding: 35px 0;
}

@media (max-width: 991.98px) {
    .banner-start-lg {
        display: none;
    }
}

.banner-start-lg .cards-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 992px;
    height: 352px;
    margin: 0 auto 54px;
    padding: 0;
}

.banner-start-lg .card {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #fff;
    border: 0;
    min-width: unset;
    margin-right: -80px;
    overflow: hidden;
}

.banner-start-lg .card img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.banner-start-lg .card .label {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 32px;
    gap: 10px;
    padding: 8px;
    border-radius: 32px;
    border: 1px solid #fbf4f6;
    background: #f2d8e1;
    color: #9f1853;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    line-height: 16px;
    font-size: 12px;
}

.banner-start-lg .step-description {
    margin: 0;
    color: #1b1f1f;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    padding: 0 12px;
    flex: 1;  
    display: flex; 
    align-items: center;  
    justify-content: center;
}

/* ---------- Posiciones / profundidad ---------- */
.banner-start-lg .card.pos-1 {
    z-index: 6;
    transform: translate(0);
    width: 320px;
    height: 352px;
    gap: 24px;
    padding: 4px 4px 16px;
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(167, 167, 167, .45);
}

.banner-start-lg .card.pos-1 img {
    height: 220px;
}

.banner-start-lg .card.pos-1 .step-description {
    font-size: 18px;
}

.banner-start-lg .card.pos-2 {
    z-index: 5;
    transform: translate(200px);
    width: 304px;
    height: 334.4px;
    gap: 22.8px;
    padding: 3.8px 3.8px 15.2px;
    border-radius: 22.8px;
    box-shadow: 0 7.6px 38px rgba(167, 167, 167, .45);
}

.banner-start-lg .card.pos-2 img {
    height: 209px;
    opacity: .9;
    border-radius: 19px;
}

.banner-start-lg .card.pos-2 .step-description {
    font-size: 17px;
    opacity: .9;
}

.banner-start-lg .card.pos-3 {
    z-index: 4;
    transform: translate(360px);
    width: 288px;
    height: 316.8px;
    gap: 21.6px;
    padding: 3.6px 3.6px 14.4px;
    border-radius: 21.6px;
    box-shadow: 0 7.2px 36px rgba(167, 167, 167, .45);
    filter: blur(.5px);
}

.banner-start-lg .card.pos-3 img {
    height: 198px;
    opacity: .8;
    border-radius: 18px;
}

.banner-start-lg .card.pos-3 .step-description {
    font-size: 16px;
    opacity: .8;
}

.banner-start-lg .card.pos-4 {
    z-index: 3;
    transform: translate(500px);
    width: 272px;
    height: 296px;
    gap: 20.4px;
    padding: 3.4px 3.4px 13.6px;
    border-radius: 20.4px;
    box-shadow: 0 6.8px 34px rgba(167, 167, 167, .45);
    filter: blur(1.5px);
}

.banner-start-lg .card.pos-4 img {
    height: 187px;
    opacity: .7;
    border-radius: 17px;
}

.banner-start-lg .card.pos-4 .step-description {
    font-size: 15px;
    opacity: .7;
}

.banner-start-lg .card.pos-5 {
    z-index: 2;
    transform: translate(625px);
    width: 256px;
    height: 279px;
    gap: 19.2px;
    padding: 3.2px 3.2px 12.8px;
    border-radius: 19.2px;
    box-shadow: 0 6.4px 32px rgba(167, 167, 167, .45);
    filter: blur(2px);
}

.banner-start-lg .card.pos-5 img {
    height: 176px;
    opacity: .6;
    border-radius: 16px;
}

.banner-start-lg .card.pos-5 .step-description {
    font-size: 14px;
    opacity: .6;
}

.banner-start-lg .card.pos-6 {
    z-index: 1;
    transform: translate(730px);
    width: 240px;
    height: 262px;
    gap: 18px;
    padding: 3px 3px 12px;
    border-radius: 18px;
    box-shadow: 0 6px 30px rgba(167, 167, 167, .45);
    filter: blur(2.5px);
}

.banner-start-lg .card.pos-6 img {
    height: 165px;
    opacity: .6;
    border-radius: 15px;
}

.banner-start-lg .card.pos-6 .step-description {
    font-size: 13px;
    opacity: .6;
}

/* ---------- Controles de progreso ---------- */
.banner-start-lg .progress-controls,
.banner-start-xs .progress-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.banner-start-lg .progress-button,
.banner-start-xs .progress-button {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f2d8e1;
    border: 1px solid #f2d8e1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}

.banner-start-lg .progress-button svg,
.banner-start-xs .progress-button svg {
    width: 12px;
    height: 12px;
}

.banner-start-lg .progress-button:hover,
.banner-start-xs .progress-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.banner-start-lg .progress-button:disabled,
.banner-start-xs .progress-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.banner-start-lg .progress-container,
.banner-start-xs .progress-container {
    position: relative;
    width: 360px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fbeaf1 0%, #f2d8e1 100%);
    border: 1px solid #f2d8e1;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(167, 167, 167, .35);
}

.progress-text {
    position: absolute;
    top: 50%;
    right: 6px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    transform: translateY(-50%);
    color: #9f1853;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.06px
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0
    }
    to {
        background-position: 0 0
    }
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none
    }
}

.progress-bar {
    display: flex;
    width: 48px;
    padding: 8px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: 100%;
    width: 16.66%;
    transition: width .5s ease;
    position: relative;
    border-radius: 40px;
    background: linear-gradient(90deg, #F2D8E1 0%, #9F1853 100%);
    box-shadow: 0 0 32px 0 #f2d8e1
}

.progress-bar svg {
    align-self: flex-end
}

/* Ajuste responsive para mobile */
@media (max-width: 767px) {
    .banner-start-xs .progress-container {
        width: 280px; /* Más estrecho en mobile */
    }
}

/* Transición más suave (curva springy) y control por variable */
.banner-start-lg .card{
  --t:.6s;
  transition:
    transform var(--t) cubic-bezier(.16,1,.3,1),
    filter   calc(var(--t)*.75) ease,
    opacity  calc(var(--t)*.75) ease,
    box-shadow .3s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Mientras viaja al fondo, que pase por encima y sea un poco más rápida */
.banner-start-lg .card.is-lifted{
  --t:.38s;          /* más rápida solo para la que “viaja” */
  z-index: 999;      /* cruza por encima del resto */
}

.banner-start-xs {
    background: #f3f5f8;
    padding: 0
}

.banner-start-xs .label {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background: #f2d8e1;
    color: #9f1853;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    left: 12px;
    top: 12px
}

.banner-start-xs .active-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    padding: 4px;
    width: 320px;
    height: 300px;
    margin: 0 auto 30px;
    border-radius: 24px;
    box-shadow: 0 8px 40px 0 rgba(167, 167, 167, .45);
    transition: all .3s ease
}

.banner-start-xs .active-card .label {
    width: 79px;
    padding: 8px;
    font-size: 12px;
    line-height: 16px
}

.banner-start-xs .active-card h3 {
    color: #1b1f1f;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.18px;
    margin: 0;
    height: 70px;
    align-content: center
}

.banner-start-xs .carousel-container {
    position: relative;
    margin-bottom: 24px
}

.banner-start-xs .carousel {
    display: flex;
    padding: 8px;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Para iOS */
    scroll-behavior: smooth;
    /* Quitar overflow:hidden para permitir scroll */
}

.banner-start-xs .carousel::-webkit-scrollbar {
    display: none
}

.banner-start-xs .card-xs {
    position: relative;
    border-radius: 24px;
    background: #fff;
    scroll-snap-align: center;
    flex: 0 0 132px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.6;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.banner-start-xs .card-xs .label {
    padding: 4px 8px;
    font-size: 10px;
    line-height: 12px
}

.banner-start-xs .card-xs img {
    width: 132px;
    height: 104px;
    border-radius: 20px;
    padding: 4px
}

.banner-start-xs .card-xs h3 {
    overflow: hidden;
    color: #1b1f1f;
    text-overflow: ellipsis;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.14px;
    margin-top: 8px;
    padding: 0 8px
}

.banner-start-xs .btn-flex {
    margin-top: 32px
}

/* Ajuste para el contenedor del carrusel */
.banner-start-xs .carousel-container {
    margin: 0 -20px;
    padding: 0 20px;
    overflow: hidden;
}

/* Ajustes responsive */
@media (max-width: 767px) {
    .banner-start-xs .container {
        padding: 0 20px;
    }
    
    .banner-start-xs .active-card {
        margin: 0 auto 24px;
    }
}