/* ===================== CARRUSEL LADY TAP (ESTILO TIPO VIDEO - CORREGIDO FINAL SIN RECORTE) ===================== */

:root {
    --accordion-width-min: 7%;    
    --accordion-width-max: 65%;   
    --accordion-height: clamp(350px, 60vw, 550px); 
    --accordion-border-color: rgba(155,93,229,.45);
    --accordion-accent-color: var(--lt-accent, #b164f7);
    --accordion-text-color: var(--lt-text, #f3e9ff);
    --accordion-div-radius: 18px; 
    --accordion-scale-inactive: 0.95; /* Usamos un scale pequeño para la ilusión sin recorte */
}

.accordion-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: var(--accordion-height);
    margin: 30px auto 40px auto;
    border-radius: var(--accordion-div-radius); /* Mantenemos este radio para el contenedor */
    box-shadow: none; 
    background-color: transparent; 
    border: none; 
    overflow: hidden;
    perspective: 1000px; 
}

.accordion-slide {
    display: flex;
    width: 100%;
    height: 100%;
    user-select: none; 
    cursor: default;
    transition: all 0.5s ease-in-out;
    transform-style: preserve-3d; 
}

.accordion-item {
    position: relative;
    height: 100%;
    background-color: #000;
    /* FIX: Quitamos overflow:hidden para evitar que corte el transform */
    overflow: visible; 
    
    /* FIX: APLICAMOS BORDES CURVEADOS A CADA ITEM */
    border-radius: var(--accordion-div-radius); 
    margin: 0 4px; /* Separación estética entre ítems */

    /* CONTROL DEL TAMAÑO */
    flex-grow: 1; 
    flex-basis: var(--accordion-width-min); 
    
    /* Transición para todos los cambios */
    transition: flex-grow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                flex-basis 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                filter 0.5s ease;
    
    /* FIX: ESCALA PARA LA ILUSIÓN DE PROFUNDIDAD (sin rotación) */
    transform-origin: center center;
    transform: scale(var(--accordion-scale-inactive)); 
    
    /* FILTRO GRIS Y OSCURECIMIENTO POR DEFECTO */
    filter: grayscale(100%) brightness(0.65);
}

/* El ítem activo NO lleva margen (ya que ocupa el centro) */
.accordion-item.active {
    margin: 0; 
}

/* Estado Expandido: CLAVE (hover/active) */
.accordion-item.active {
    flex-grow: 5;
    flex-basis: var(--accordion-width-max);
    
    /* FIX: Aplicamos una escala mínima para asegurar que no se corte por el contenedor */
    filter: none;
    transform: scale(0.99); 
    box-shadow: 0 0 15px rgba(155,93,229,.6); 
    z-index: 10; 
}

/* FIX: Contenido (Texto) Superpuesto */
.slide-content-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--accordion-text-color);
    transition: opacity 0.5s ease 0.2s; 
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transform-origin: bottom left;
    transform: scale(1); 
}
.accordion-item.active .slide-content-info {
    opacity: 1;
    transform: scale(1);
}
.slide-content-info span {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accordion-accent-color);
    background: rgba(0, 0, 0, 0.4); 
    padding: 2px 5px;
    border-radius: 4px;
    margin-bottom: 4px;
    width: fit-content;
}
.slide-content-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--lt-text-dim, #d6c5ff);
}

/* Imagen dentro del ítem (el elemento visible) */
.accordion-img {
    width: 100%;
    height: 100%; /* Ocupa el 100% de la altura del item */
    object-fit: cover;
    display: block;
    /* APLICAMOS BORDES CURVEADOS A LA IMAGEN TAMBIÉN */
    border-radius: var(--accordion-div-radius); 
    transition: all 0.5s ease-in-out;
}

/* --- Responsividad --- */
@media (max-width: 768px) {
    .accordion-carousel-container {
        height: clamp(300px, 80vw, 400px);
        border-radius: 12px;
    }
    .accordion-item {
        transform: scale(0.98); 
    }
    .accordion-item.active {
        transform: scale(0.99); /* FIX: Evitar recorte en móvil */
    }
    .accordion-slide :last-child:not(.active) {
        transform: scale(0.98);
    }
    .slide-content-info {
        bottom: 10px;
        left: 10px;
    }
    .slide-content-info span {
        font-size: 1rem;
    }
    .slide-content-info p {
        font-size: 0.8rem;
    }
}