/* Carruseles de la portada: 3 tarjetas a la vista, flechas laterales.
   Puntos de corte del original (react-slick): 3 -> 2 a 900 px -> 1 a 480 px. */

.dl-carr{position:relative;display:flex;align-items:center;gap:10px}
.dl-carr-pista{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*26px)/3);
  gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 10px;flex:1;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none}
.dl-carr-pista::-webkit-scrollbar{display:none}
.dl-carr-pista > *{scroll-snap-align:start;min-width:0}

.dl-carr-nav{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(33,43,56,.16);
  background:#fff;color:var(--slate,#212B38);font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;padding:0 0 3px}
.dl-carr-nav:hover:not([disabled]){background:var(--slate,#212B38);color:#fff;border-color:var(--slate,#212B38)}
.dl-carr-nav[disabled]{opacity:.3;cursor:default}
.dl-carr-nav:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:2px}
.dl-carr.sin-nav .dl-carr-nav{display:none}

/* Los tres botones de catálogo, centrados bajo el carrusel de producciones. */
.dl-catalogo{margin:38px 0 18px}
.dl-catalogo h3{font-size:1.35rem;font-weight:500;color:var(--slate,#212B38);margin:0}
.dl-mvfilters--centro{justify-content:center}

@media(max-width:900px){ .dl-carr-pista{grid-auto-columns:calc((100% - 26px)/2)} }
@media(max-width:480px){ .dl-carr-pista{grid-auto-columns:100%} .dl-carr-nav{width:32px;height:32px;font-size:1.2rem} }
@media(prefers-reduced-motion:reduce){ .dl-carr-pista{scroll-behavior:auto} }