/* Lo último — cross-platform activity strip (Ultimo.jsx). Page-scoped, like
   marcas.css / cobertura.css / contacto.css. */

.mm-ultimo{
  background:var(--surface-page);
  padding:var(--section-pad-y) 0;
  border-top:1px solid var(--border-hairline);
}

.mm-ultimo__head{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:end;
}
.mm-ultimo__title{
  margin:22px 0 0; font-family:var(--font-sans); font-weight:var(--fw-regular);
  font-size:clamp(30px,3.6vw,46px); line-height:1.04;
  letter-spacing:var(--tracking-title); text-transform:uppercase;
  color:var(--mm-ink); max-width:16ch; text-wrap:balance;
}
.mm-ultimo__title span{ font-weight:var(--fw-medium); }
.mm-ultimo__lede{
  margin:0; font-family:var(--font-serif); font-size:18px; line-height:1.5;
  color:var(--text-body); max-width:42ch;
}

/* Four media, four cards. Cards draw their own hairlines and overlap by 1px,
   the same lattice used by the brand grid and the division cards. */
.mm-ultimo__grid{
  margin-top:52px; display:grid; gap:0;
  grid-template-columns:repeat(4,1fr);
}
.mm-ultimo__grid > *{ display:flex; }

.mm-ultimo__card{
  flex:1; display:flex; flex-direction:column; align-items:flex-start;
  background:var(--surface-page); padding:26px 24px 22px;
  border:1px solid var(--border-hairline); margin:0 -1px -1px 0;
  text-decoration:none; min-height:230px;
  transition:background var(--dur) var(--ease-out);
}
.mm-ultimo__card:hover{ background:var(--surface-alt); }
.mm-ultimo__card:focus-visible{ outline:2px solid var(--mm-ink); outline-offset:-3px; }

.mm-ultimo__division{
  font-family:var(--font-sans); font-size:11px; font-weight:var(--fw-medium);
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}

/* The brand's own logo is the only colour on the card — the same marks as the
   wall, tying the two together. */
.mm-ultimo__brand{
  display:flex; align-items:center; gap:10px; margin-top:20px;
}
.mm-ultimo__brand img{ width:34px; height:34px; flex:none; object-fit:contain; display:block; }
.mm-ultimo__brand span{
  font-family:var(--font-sans); font-size:13px; font-weight:var(--fw-medium);
  letter-spacing:.02em; color:var(--mm-ink);
}

/* Real headlines vary wildly in length, so clamp rather than let one card
   stretch the whole row. Three lines keeps every title legible and the grid
   even. */
.mm-ultimo__headline{
  margin-top:16px; font-family:var(--font-serif); font-size:16px; line-height:1.4;
  color:var(--text-body);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

.mm-ultimo__author{
  margin-top:9px; font-family:var(--font-sans); font-size:12.5px;
  font-weight:var(--fw-medium); letter-spacing:.03em; color:var(--mm-ink);
}

.mm-ultimo__foot{
  margin-top:auto; padding-top:18px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mm-ultimo__state{
  font-family:var(--font-sans); font-size:12px; font-weight:var(--fw-medium);
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted);
}
.mm-ultimo__go{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-sans); font-size:11px; font-weight:var(--fw-medium);
  letter-spacing:.07em; text-transform:uppercase; color:var(--mm-ink);
  opacity:.55; transition:opacity var(--dur) var(--ease-out);
}
.mm-ultimo__go svg{
  width:10px; height:10px; display:block;
  transition:transform var(--dur) var(--ease-out);
}
.mm-ultimo__card:hover .mm-ultimo__go,
.mm-ultimo__card:focus-visible .mm-ultimo__go{ opacity:1; }
.mm-ultimo__card:hover .mm-ultimo__go svg{ transform:translate(1px,-1px); }
.mm-ultimo__note{
  margin:26px 0 0; font-family:var(--font-sans); font-size:12.5px;
  line-height:1.5; color:var(--text-muted); max-width:60ch;
}

@media (max-width:1100px){
  .mm-ultimo__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .mm-ultimo__head{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .mm-ultimo__grid{ margin-top:34px; }
  .mm-ultimo__card{ min-height:0; padding:20px 18px; }
}
@media (max-width:520px){
  .mm-ultimo__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .mm-ultimo__card,.mm-ultimo__go,.mm-ultimo__go svg{ transition:none; }
  .mm-ultimo__card:hover .mm-ultimo__go svg{ transform:none; }
}