/* --- Reset mínimo y corrección de UL --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }


/* Asegura que el UL no añada márgenes/padding (causaba huecos) */
.carousel__track { list-style: none; margin: 0; padding: 0; }


/* --- Carrusel --- */
.carousel {
--visible: 3; /* Nº de slides visibles (PC: 3) */
--control-size: 48px; /* Área clicable de flechas */
--arrow-stroke: 1px; /* Línea fina blanca */
--transition-ms: 420ms; /* Velocidad animación */


position: relative;
width: 100%;
margin: 0; 
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
}


.carousel__viewport {
overflow: hidden; 
width: 100%;
margin: 0;
}


.carousel__track {
display: flex;
gap: 0; 
will-change: transform;
transform: translate3d(0,0,0);
transition: transform var(--transition-ms) ease;
}


.carousel__slide {
flex: 0 0 calc(100% / var(--visible)); 
line-height: 0; 
}


.carousel__slide img {
display: block;
width: 100%;
height: 650px;
object-fit: cover; 

}


/* --- Flechas de navegación --- */
.carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--control-size);
height: var(--control-size);
display: grid;
place-items: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
z-index: 10;
}
.carousel__nav:focus-visible { outline: 2px dashed rgba(255,255,255,.6); outline-offset: 2px; }


.carousel__nav--prev { left: 0; }
.carousel__nav--next { right: 0; }


.carousel__nav svg {
width: 80%;
height: 80%;
stroke: #fff;
stroke-width: var(--arrow-stroke);
fill: none;
}

.carousel__nav:hover, .carousel__nav:focus {
    background-color: #a5a58d !important;
}


/* Elimina cualquier sombreado lateral (simplificamos para compatibilidad) */
.carousel::before,
.carousel::after { display: none; }


/* --- Responsive opcional --- */
@media (max-width: 900px) {
.carousel { --visible: 1; }
}