.categories{display:grid;grid-template-columns:1fr;gap:16px;margin:20px 0}
.categories-carousel{display:flex;align-items:center;gap:1rem;position:relative;margin-top:0}
.categories-carousel .categories-viewport{overflow:hidden;flex:1;touch-action:pan-y}
.categories-carousel .categories.track{display:flex;gap:1.5rem;align-items:stretch;transition:transform var(--transition);will-change:transform}
.categories-carousel .categories.track .card{flex:0 0 calc((100% - 3rem) / 3);min-width:260px;max-width:360px;transition:transform .28s ease,opacity .28s ease}
.categories-carousel .categories.track .card.carousel-center{transform:scale(1);opacity:1}
.categories-carousel .categories.track .card.carousel-side{transform:scale(0.92);opacity:0.78}
.categories-carousel .category-nav-button{background:var(--lilac-deep);color:var(--card);border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .2s ease,opacity .2s ease}
.categories-carousel .category-nav-button:hover{transform:translateY(-1px)}
.categories-carousel .category-nav-button:disabled{opacity:.35;cursor:not-allowed;transform:none}
.card{background:var(--card);padding:14px;border-radius:calc(var(--radius) - 2px);display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);transition:transform var(--transition);justify-content: center;}
.card:hover{transform:translateY(-4px)}
.card img{width:140px;height:100px;object-fit:cover;border-radius:10px}
.cont-card{display:flex;flex-direction:column;gap:8px}
/* centrar en la tarjeta el contenido de la categoria, y que el boton de ver mas quede abajo, y que la imagen quede arriba, y que el titulo quede arriba de la imagen, y que la descripcion quede abajo de la imagen, y que todo quede centrado en la tarjeta */
.cat-title{text-align:center}
.cat-title h3{margin:0;font-size:1.6rem;color:var(--lilac-deep)}
.cat-info{text-align:center}
.cat-info img{width:100%;height:auto;max-height:200px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.cat-info p{margin:0;color:var(--text);font-size:1.4rem;line-height:1.4}
.cat-cta{text-align:center;margin-top:auto}
@media(max-width:1023px){.categories-carousel .categories.track .card{flex:0 0 100%;max-width:none}}
@media(min-width:768px){.categories{grid-template-columns:repeat(3,1fr)}}