/* Matmap Categorías Destacadas · frontend
   -------------------------------------------------------------------------
   Antes esta hoja se escribía dentro del HTML de la página, con los colores y
   las alturas interpolados desde PHP. Además usaba un flag estático, así que
   si en una misma página había dos secciones con colores distintos, la
   segunda heredaba los de la primera.

   Ahora las reglas son fijas y viven aquí (cacheable y minificable), y lo que
   cambia por sección viaja en propiedades personalizadas puestas en el propio
   <section>: --mmcat-bg, --mmcat-p, --mmcat-a, --mmcat-h, --mmcat-hd,
   --mmcat-cols. Cada sección se pinta con lo suyo.                          */

.mmcat-block{
  padding:56px 24px;
  background:var(--mmcat-bg,#fff);
  text-align:center;
}

.mmcat-block__title{
  font-size:clamp(1.4rem,3vw,1.9rem);
  font-weight:700;
  color:var(--mmcat-p,var(--mm-brand,#3A3971));
  margin:0 0 36px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.mmcat-block__title a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.mmcat-block__grid{
  display:flex;
  overflow-x:auto;
  gap:16px;
  list-style:none;
  margin:0 auto;
  padding:0 0 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:100%;
  background-color:var(--mmcat-bg,#fff);
  background-repeat:no-repeat;
  background-size:48px 100%,48px 100%,20px 100%,20px 100%;
  background-position:left,right,left,right;
  background-attachment:local,local,scroll,scroll;
  background-image:
    linear-gradient(to right,var(--mmcat-bg,#fff) 40%,rgba(0,0,0,0)),
    linear-gradient(to left, var(--mmcat-bg,#fff) 40%,rgba(0,0,0,0)),
    linear-gradient(to right,rgba(0,0,0,.14),rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,.14),rgba(0,0,0,0));
}
.mmcat-block__grid::-webkit-scrollbar{ display:none; }

.mmcat-block__grid li{
  flex:0 0 calc((100% - (var(--mmcat-cols,4) - 1) * 16px) / var(--mmcat-cols,4));
  scroll-snap-align:start;
  min-width:160px;
  border-radius:var(--mm-r-md,12px);
  overflow:hidden;
  height:var(--mmcat-h,320px);
  position:relative;
}
@media (max-width:1023px){ .mmcat-block__grid li{ flex:0 0 72%; } }
@media (max-width:540px){
  .mmcat-block{ padding:40px 16px; }
  .mmcat-block__grid li{ flex:0 0 85%; }
}
@media (min-width:1280px){ .mmcat-block__grid li{ height:var(--mmcat-hd,340px); } }

.mmcat-block__link{
  position:relative;
  display:flex;
  align-items:flex-end;
  width:100%;height:100%;
  text-decoration:none;
  outline-offset:3px;
}
.mmcat-block__link img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94);
}
.mmcat-block__link:hover img,
.mmcat-block__link:focus-visible img{ transform:scale(1.07); }

.mmcat-block__overlay{
  position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.72) 100%);
  transition:opacity .3s ease;
}
.mmcat-block__link:hover .mmcat-block__overlay,
.mmcat-block__link:focus-visible .mmcat-block__overlay{ opacity:1.2; }

.mmcat-block__cap{
  position:relative;z-index:1;
  width:100%;
  box-sizing:border-box;
  padding:20px 16px 18px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  /* min-width:0 permite que los hijos se encojan dentro del flex; sin esto
     un texto largo empuja el ancho del contenedor y desborda la tarjeta. */
  min-width:0;
}
.mmcat-block__cap strong{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  color:#fff;
  font-size:1rem;font-weight:700;line-height:1.25;letter-spacing:.01em;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* El texto de estas CTA lo escribe el administrador y puede ser largo
   ("Explorar suelo porcelánico imitación barro"). Con white-space:nowrap se
   salía de la tarjeta y se cortaba. Ahora envuelve y nunca desborda. */
.mmcat-block__cta{
  display:inline-block;
  max-width:100%;
  box-sizing:border-box;
  background:var(--mmcat-p,var(--mm-brand,#3A3971));
  color:#fff;
  padding:8px 16px;
  border-radius:var(--mm-r-full,100px);
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.3;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  transition:background .25s ease,transform .2s ease;
}
.mmcat-block__link:hover .mmcat-block__cta,
.mmcat-block__link:focus-visible .mmcat-block__cta{
  background:var(--mmcat-a,var(--mm-accent,#E69130));
  transform:translateY(-2px);
}

.mmcat-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  .mmcat-block__link img,
  .mmcat-block__cta,
  .mmcat-block__overlay{ transition:none !important; }
  .mmcat-block__link:hover img{ transform:none !important; }
}