/* ==========================================================================
   Media Kit — estilos específicos
   ========================================================================== */
.mk-sec { padding-bottom: 130px; }
main [id] { scroll-margin-top: 90px; }
.mk-hero {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px;
  padding-top: 110px; padding-bottom: 120px; align-items: center;
}
.mk-hero-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--surface); }
.mk-hero-media .slot img { object-position: center 20%; }
.mk-hero .eyebrow { margin-bottom: 28px; }
.mk-title {
  font-family: var(--serif); font-size: clamp(44px, 6vw, 92px); font-weight: 400;
  margin: 0 0 22px; line-height: 0.9; letter-spacing: -0.03em;
}
.mk-tagline { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 25px); color: var(--lead); margin: 0 0 28px; }
.mk-hero .lede { max-width: 450px; margin: 0 0 42px; }
.mk-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.mk-ctas .btn { padding: 17px 34px; }

.mk-sticky { top: 120px; }
.mk-attrs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 40px; margin-top: 34px; }
.mk-attr { border-top: 1px solid rgba(181,154,112,0.45); padding-top: 20px; }
.mk-attr h3, .mk-mode h3 {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 12px;
}
.mk-attr p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; font-weight: 300; }

.mk-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid rgba(244,241,236,0.14); border-bottom: 1px solid rgba(244,241,236,0.14);
}
.mk-stat { padding: 44px 26px; text-align: center; border-right: 1px solid rgba(244,241,236,0.1); }
.mk-stat:last-child { border-right: none; }
.mk-stat-value {
  font-family: var(--serif); font-size: clamp(17px, 1.6vw, 22px); margin-bottom: 12px;
  color: var(--ivory); line-height: 1.3; text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.mk-stat-label { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.mk-svc-note { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 28px 0 0; font-weight: 300; max-width: 330px; }
.mk-svc-row { grid-template-columns: 62px 1fr; padding: 30px 0; }
.mk-svc-row .svc-title { font-size: clamp(20px, 1.9vw, 28px); }

.mk-center-h2 { font-size: clamp(30px, 3.6vw, 50px); }
.mk-modes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); margin-top: 56px; }
.mk-mode { background: var(--ink); padding: 40px 32px 38px; display: flex; flex-direction: column; }
.mk-mode h3 { font-size: 9.5px; margin-bottom: 20px; }
.mk-mode p { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--body); margin: 0; }
.mk-note { text-align: center; font-size: 12.5px; line-height: 1.85; color: var(--muted); margin: 28px auto 0; max-width: 620px; font-weight: 300; }


.mk-sub { text-align: center; font-size: 14.5px; line-height: 1.8; color: var(--muted); max-width: 520px; margin: 18px auto 56px; font-weight: 300; }

.mk-cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; margin-top: 60px; }
.mk-case { display: flex; flex-direction: column; }
.tile-zoom { position: relative; overflow: hidden; background: var(--surface); }
.tile-zoom .slot { transition: transform 1.4s var(--ease); }
.tile-zoom:hover .slot { transform: scale(1.05); }
.mk-case .tile-zoom { aspect-ratio: 4/5; margin-bottom: 26px; }
.mk-case-cat { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.mk-case h3 { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 27px); font-weight: 400; margin: 0 0 14px; letter-spacing: -0.01em; }
.mk-case-role { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }
.mk-case-desc { font-size: 13.5px; line-height: 1.8; color: var(--muted); margin: 0; font-weight: 300; text-wrap: pretty; }

.mk-videos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.mk-vcard { display: block; position: relative; aspect-ratio: 9/16; overflow: hidden; background: var(--surface); }
.mk-vshade {
  position: absolute; inset: 0; pointer-events: none; display: block;
  background: linear-gradient(180deg, rgba(16,15,14,0.35) 0%, transparent 30%, transparent 52%, rgba(16,15,14,0.94) 100%);
}
.mk-vcard .play { top: 36%; width: 54px; height: 54px; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.mk-vcard .play::before { border-top-width: 8px; border-bottom-width: 8px; border-left-width: 13px; }
.mk-vcard:hover .play { background: var(--gold); border-color: var(--gold); }
.mk-vcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 18px 20px; display: block; }
.mk-vcap::before { content: ''; display: block; width: 20px; height: 1px; background: var(--gold); margin-bottom: 11px; }
.mk-vtitle { display: block; font-family: var(--serif); font-size: 17px; color: var(--ivory); margin-bottom: 5px; }
.mk-vlink { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

.mk-sel { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: stretch; }
.mk-sel-lead { aspect-ratio: 4/5; }
.mk-sel-rest { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; }
.mk-sel-rest > div { min-height: 130px; }

.mk-final { border-top: 1px solid rgba(244,241,236,0.1); padding-top: 120px; }
.mk-final-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.mk-final .h2 { font-size: clamp(30px, 4vw, 52px); margin: 0 0 22px; line-height: 1.06; }
.mk-final p { font-size: 15px; color: var(--muted); max-width: 520px; margin: 0 auto 42px; line-height: 1.85; font-weight: 300; text-wrap: pretty; }
.mk-final .btn { padding: 18px 38px; }

.site-footer.mk-footer { padding-top: 66px; padding-bottom: 44px; }
.mk-footer .footer-cols { gap: 44px; padding-bottom: 44px; }
.mk-footer .logo { margin-bottom: 14px; }

@media (max-width: 1100px) {
  .mk-hero { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .mk-hero-media { order: -1; width: 100%; aspect-ratio: auto; height: 74vw; max-height: 470px; }
  .mk-cases { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-sel { grid-template-columns: minmax(0,1fr); }
  /* La pieza de Foco Race x Smart Fit es vertical: en una sola columna necesita
     su proporción real (11/16) o se pierden el titular y los logos. */
  .mk-sel-lead { aspect-ratio: 11/16; width: 100%; max-width: 480px; justify-self: center; }
  .mk-sel-rest { grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: auto; }
  .mk-sel-rest > div { aspect-ratio: 4/5; min-height: 0; }
}
@media (max-width: 900px) {
  .mk-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-stat:nth-child(2) { border-right: none; }
  .mk-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(244,241,236,0.1); }
  .mk-modes { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .mk-hero-media .slot img { object-position: center 15%; }
  .mk-cases { grid-template-columns: minmax(0,1fr); }
  .mk-videos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-sel-lead { max-width: none; }
  .mk-sel-rest { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-sel-rest > div:first-child { grid-column: span 2; aspect-ratio: 16/10; }
  .mk-attrs { grid-template-columns: minmax(0,1fr); }
  .mk-sec { padding-bottom: 92px; }
}