:root{
  --um-font: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --um-text: #1b1b1b;
  --um-muted: #6b7280;
  --um-site-max: 1024px;
  --um-radius: 14px;
  --um-gap: 16px;
  --um-nav-arrow: 44px;   
   --um-nav-dot: 8px;  
}

/* Contenedor de sección (mismo ancho/padding que hero/grids) */
.um-sm-section{ font-family:var(--um-font); color:var(--um-text); margin:24px auto; max-width:var(--um-site-max); padding:0 16px; }
.um-sm-header{ display:flex; justify-content:center; margin-bottom:12px; }
.um-sm-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:#f3f4f6; border:1px solid #e5e7eb; color:#111827; font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.um-sm-chip:hover{ background:#e5e7eb; }

/* Track: mobile scroll-snap; desktop carrusel */
.um-sm-track-wrapper{ position:relative; }
.um-sm-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 2px 10px;
}
.um-sm-track::-webkit-scrollbar{ height:8px; }
.um-sm-track::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:999px; }

/* Card Medium */
.um-sm-card{ flex:0 0 85%; max-width:85%; scroll-snap-align:start; background:#fff; border-radius:var(--um-radius); overflow:hidden; box-shadow:0 6px 24px -12px rgba(0,0,0,.20), 0 2px 8px -4px rgba(0,0,0,.12); }
.um-sm-card__media{ position:relative; display:block; width:100%; aspect-ratio:16/9; background:#f3f4f6; }
.um-sm-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.um-sm-card__content{ display:grid; gap:6px; padding:12px; }
.um-sm-card__title{ font-weight:600; line-height:1.2; margin:0; font-size:16px; }
.um-sm-card__title a{ color:inherit; text-decoration:none; }
.um-sm-card__date{ font-weight:300; font-size:13.5px; color:var(--um-muted); }

/* Tablet: 2 por vista; Desktop: 3 por vista */
@media (min-width:640px){
  .um-sm-card{ flex:0 0 calc((100% - 16px)/2); max-width:calc((100% - 16px)/2); }
}
@media (min-width:960px){
  .um-sm-card{ flex:0 0 calc((100% - 32px)/3); max-width:calc((100% - 32px)/3); }
}

/* Nav (desktop) */
.um-sm-nav{ display:none; }
@media (min-width:960px){
  .um-sm-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
  .um-sm-arrow{
    display:inline-flex; align-items:center; justify-content:center;
    width: var(--um-nav-arrow); height: var(--um-nav-arrow);
    border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  }
  .um-sm-dots{ display:flex; gap:6px; }
  .um-sm-dot{
    width: var(--um-nav-dot); height: var(--um-nav-dot);
    border-radius:999px; background:#d1d5db;
  }
  .um-sm-dot.is-active{ background:#111827; }
}