/* Marcas — shared by the homepage directory (index.html) and the full
   roster page (marcas.html). Lives in its own file precisely because two
   pages render the same components; duplicating it inline would let the
   two surfaces drift. */

  /* ══ MARCAS ═══════════════════════════════════════════════════════════
     Shared by the homepage directory (Marcas.jsx) and marcas.html. Kept
     here rather than inline so both surfaces stay identical. */

  .mm-marcas-head{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px;
    align-items:end; margin-top:22px;
  }

  /* Seven division cards. Seven never fills a rectangular grid. An earlier
     pass made the last card span two columns to close the gap, but a
     double-wide card whose content doesn't justify the extra width just reads
     as a layout bug. So the cards draw their own hairlines and overlap by 1px
     — the same lattice the brand grid uses — and an unfilled slot simply
     renders nothing. Four then three, ending where the cards end.
     Grid items are Reveal wrappers (see helpers.jsx), not the <a> itself —
     hence `> *` here and flex:1 on the card so it fills its cell. */
  .mm-division-grid{
    margin-top:52px; display:grid; gap:0;
    grid-template-columns:repeat(4,1fr);
  }
  .mm-division-grid > *{ display:flex; }
  @media (max-width:1150px){ .mm-division-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:860px){ .mm-division-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .mm-division-grid{ grid-template-columns:1fr; } }

  .mm-division-card{
    flex:1;
    background:var(--surface-page); padding:34px 28px 28px;
    display:flex; flex-direction:column; gap:0; text-decoration:none;
    min-height:264px; position:relative;
    border:1px solid var(--border-hairline);
    margin:0 -1px -1px 0;
    transition:background var(--dur) var(--ease-out);
  }
  /* The icons are the thing the client is proudest of, so the card inverts to
     ink on hover and the chip flips to white — the one "accent" move the brand
     manual sanctions (ink on light, white on dark). filter:invert is how, not
     fill: these load as <img>, so CSS can't reach inside the SVG. */
  .mm-division-card:hover{ background:var(--mm-ink); }
  .mm-division-card:focus-visible{ outline:2px solid var(--mm-ink); outline-offset:-3px; }
  .mm-division-card__icon{ display:block; height:84px; margin-bottom:26px; }
  .mm-division-card__icon img{
    width:78px; height:78px; display:block;
    transition:filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .mm-division-card:hover .mm-division-card__icon img{ filter:invert(1); }
  .mm-division-card__title{
    font-family:var(--font-sans); font-size:20px; font-weight:var(--fw-medium);
    letter-spacing:var(--tracking-title); text-transform:uppercase; color:var(--mm-ink);
    transition:color var(--dur) var(--ease-out);
  }
  .mm-division-card__count{
    font-family:var(--font-sans); font-size:13px; color:var(--text-muted);
    margin-top:7px; letter-spacing:var(--tracking-body);
    transition:color var(--dur) var(--ease-out);
  }
  .mm-division-card__names{
    font-family:var(--font-sans); font-size:13px; line-height:1.45;
    color:var(--text-faint); margin-top:auto; padding-top:18px;
    transition:color var(--dur) var(--ease-out);
  }
  .mm-division-card:hover .mm-division-card__title{ color:var(--mm-white); }
  .mm-division-card:hover .mm-division-card__count{ color:rgba(255,255,255,0.82); }
  .mm-division-card:hover .mm-division-card__names{ color:rgba(255,255,255,0.62); }
  @media (prefers-reduced-motion:reduce){
    .mm-division-card,.mm-division-card__icon img,
    .mm-division-card__title,.mm-division-card__count,.mm-division-card__names{ transition:none; }
  }

  /* ── marcas.html: division sections + brand cards ─────────────────── */
  /* Anchors must clear the 76px fixed header, or a deep link lands with the
     division title hidden underneath it. */
  .mm-division[id]{ scroll-margin-top:96px; }
  .mm-division{ padding:clamp(48px,6vw,76px) 0; border-top:1px solid var(--border-hairline); }
  .mm-division:first-of-type{ border-top:none; }
  /* The ribbon. Sticks just under the 76px site header and stays put for the
     whole division, so the icon and name never scroll out of reach. z-index
     matters: brand cards have their own background and come later in the DOM,
     so without it they would paint straight over the pinned bar. */
  .mm-division__bar{
    position:sticky; top:76px; z-index:5;
    display:flex; align-items:center; gap:16px;
    padding:14px 0; margin-bottom:0;
    background:var(--surface-page);
    border-bottom:1px solid var(--border-hairline);
  }
  .mm-division__icon{
    width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-hairline);
    border-top:var(--border-accent-width) solid var(--accent);
  }
  .mm-division__icon img{ width:32px; height:32px; display:block; }
  .mm-division__title{
    margin:0; font-family:var(--font-sans); font-size:clamp(20px,2.4vw,28px);
    font-weight:var(--fw-medium); letter-spacing:var(--tracking-title);
    text-transform:uppercase; color:var(--mm-ink); line-height:1.1;
  }
  .mm-division__tally{
    margin-left:auto; font-family:var(--font-sans); font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  }
  .mm-division__highlight{
    margin:22px 0 30px; font-family:var(--font-serif); font-size:17px; line-height:1.45;
    color:var(--text-body); max-width:44ch;
  }

  /* Unlike the seven division cards, brand counts vary per division (7, 6,
     17, 9, 1, 1, 5), so no last-child span can square off every grid. The
     hairlines are therefore drawn BY THE CARDS rather than by a container
     background showing through gaps — an unfilled cell then renders nothing
     at all instead of a grey block that reads as a broken card. */
  .mm-brand-grid{
    display:grid; gap:0; grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  }
  /* Each card carries its OWN full border and is pulled 1px into its
     neighbour, so shared edges collapse to a single hairline. The frame
     therefore traces exactly the cards that exist: an unfilled cell draws
     nothing, and a one-brand division (Exteriores, Deportes) gets a tidy box
     around that single card instead of a rule running off into empty space. */
  .mm-brand-card{
    border:1px solid var(--border-hairline);
    margin:0 -1px -1px 0;
    background:var(--surface-page); padding:24px 22px 22px;
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    text-decoration:none; color:inherit; min-height:250px;
  }
  /* Logos ship in their own brand colours — the sub-brands are separately
     registered identities, and the manual's monochrome rule governs the
     MULTIMEDIOS mark, not depictions of other marks. No hover recolour:
     it has no equivalent on touch, so the page would behave differently
     depending on the device. */
  .mm-brand-card__logo{
    width:82px; height:82px; display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  .mm-brand-card__logo img{ width:100%; height:100%; object-fit:contain; display:block; }
  .mm-brand-card__logo--empty{
    border:1px dashed var(--border-strong); font-family:var(--font-sans);
    font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
    text-align:center; line-height:1.3; padding:6px;
  }
  .mm-brand-card__name{
    font-family:var(--font-sans); font-size:17px; font-weight:var(--fw-medium);
    letter-spacing:var(--tracking-body); color:var(--mm-ink);
  }
  .mm-brand-card__descriptor{
    font-family:var(--font-sans); font-size:12px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text-faint); margin-top:5px;
  }
  .mm-brand-card__desc{
    font-family:var(--font-serif); font-size:14.5px; line-height:1.5;
    color:var(--text-body); margin-top:12px;
  }
  .mm-brand-card__cta{
    margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-sans); font-size:12px; font-weight:var(--fw-medium);
    letter-spacing:.07em; text-transform:uppercase; color:var(--mm-ink);
    text-decoration:none; border-bottom:1px solid transparent; align-self:flex-start;
    transition:border-color var(--dur) var(--ease-out);
  }
  /* Only the real anchor reacts to the pointer — the URL-less <span> twin
     looks identical but must not pretend to be clickable. */
  a.mm-brand-card__cta:hover{ border-bottom-color:var(--mm-ink); }
  a.mm-brand-card__cta:hover svg{ transform:translate(1px,-1px); }
  .mm-brand-card__cta:focus-visible{ outline:2px solid var(--mm-ink); outline-offset:3px; }
  .mm-brand-card__cta svg{
    width:11px; height:11px; display:block;
    transition:transform var(--dur) var(--ease-out);
  }
  @media (prefers-reduced-motion:reduce){
    .mm-brand-card__cta svg{ transition:none; }
    a.mm-brand-card__cta:hover svg{ transform:none; }
  }

  @media (max-width:760px){
    .mm-marcas-head{ grid-template-columns:1fr; gap:22px; align-items:start; }
    .mm-division-grid{ margin-top:36px; }
    .mm-division-card{ min-height:0; }
    .mm-brand-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
    .mm-brand-card{ min-height:0; padding:18px 16px; }
    .mm-brand-card__logo{ width:60px; height:60px; margin-bottom:14px; }
    .mm-brand-card__desc{ display:none; }
  }

/* Visually-hidden text for screen readers. The design system has no such
   utility yet; scoped here since the outbound-link cards are the first thing
   that needs it ("abre en una pestaña nueva"). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ══ BRAND WALL ═══════════════════════════════════════════════════════
   Homepage proof-of-scale block (BrandWall.jsx). Full-bleed, on the page
   ground so every badge keeps its edge — see that file's header for why ink
   was tested and rejected. Two rows travelling in opposite directions. */
.mm-wall{
  background:var(--surface-page);
  border-bottom:1px solid var(--border-hairline);
  padding:clamp(22px,3vw,38px) 0;
  overflow:hidden;
}
.mm-wall__row{ overflow:hidden; }
.mm-wall__row + .mm-wall__row{ margin-top:clamp(12px,1.4vw,18px); }
.mm-wall__track{
  display:flex; align-items:center; gap:clamp(16px,2vw,26px);
  width:max-content;
  animation:mmWallSlide linear infinite;
}
.mm-wall__track--rev{ animation-direction:reverse; }
/* -50% is exactly one copy of the duplicated row, so the loop is seamless */
@keyframes mmWallSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Let a visitor stop the rows to actually look at a mark. */
.mm-wall:hover .mm-wall__track{ animation-play-state:paused; }

.mm-wall__item{ display:block; flex:none; width:clamp(50px,5vw,70px); }
.mm-wall__item img{
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain;
}

/* Continuous motion is precisely what this setting exists to stop: halt the
   travel and let the rows sit as static strips. */
@media (prefers-reduced-motion:reduce){
  .mm-wall__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}