:root{
--card-w: 520px; /* ancho máximo de la tarjeta activa */
--card-h: 300px; /* alto de la tarjeta */
--gap: 62%; /* separación entre tarjetas vecinas */
}
* {
    box-sizing: border-box;
}

.carousel{
    position:relative; 
    width: 100%;
    margin:auto;
}
.track{
    position:relative; 
    list-style:none; 
    padding:0; 
    margin: 0;
    display: flex;
    flex-direction: row;
}
/* Tarjeta tipo "tarjeta de visita" */
.buttons{
    transform: translate(50%, 0);
    display: block;
    position: absolute;
    width: 35%;
    top: 50%;
    right: 50%;
    z-index: 200;
}
.card{
    width:100%; 
    height:100px; 
    background:white; 
    box-shadow:4px 6px 6px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
}
#track li { transition: opacity .2s, box-shadow .2s; will-change: transform; }
#track li[style*="order: 1"]{
    position:relative;
    top: 25px;
    left: 25px;
    opacity: 0.6;
    z-index: 10;
}
#track li[style*="order: 2"]{
    position:relative;
    opacity: 1;
    z-index: 20;
}
#track li[style*="order: 3"]{
    position:relative;
    top: 25px;
    right: 25px;
    opacity: 0.6;
    z-index: 10;
}

/* Flechas */
.nav{
    position:absolute; 
    top:50%; 
    translate:0 -50%; 
    width:40px; 
    height:64px; 
    border:none;
    place-content:center; 
    cursor:pointer;
    background: none;
}

.nav.prev{
    left: -40px;
}

.nav.next{
    right: -40px;
}


/* Triángulos con CSS puro */
.nav .triangle{
    display: block;
    width: 100%;
    height: 45%;
    background: rgb(255, 255, 255);
    position: relative;
    z-index: 20;
    transition: 0.5s;
}
.nav .triangle:hover{
    transform: scale(1.2);
    transition: 0.5s;

}
.nav.prev .triangle{
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}

.nav.next .triangle{
    clip-path: polygon(0% 100%, 0% 0%, 100% 50%);
}