/* ============================================================
   Digital Menu — maquetas de las formas del menú
   Vistas a escala de teléfono: tipos chicos pero legibles.
   ============================================================ */

.mk {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--texto);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
}
.mk img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mk-top { display: flex; align-items: center; gap: 5px; padding: 0 8px; }
.mk-logo {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--display);
  font-size: 8px;
}
.mk-nombre {
  font-family: var(--display);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-pills { display: flex; gap: 3px; padding: 0 8px; overflow: hidden; }
.mk-pill {
  flex: 0 0 auto;
  font-size: 7px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 99px;
  border: 1px solid var(--linea-viva);
  white-space: nowrap;
  opacity: 0.7;
}
.mk-pill.activa { background: #17130F; color: #FDFAF6; border-color: #17130F; opacity: 1; }

/* Cartel principal */
.mk-cartel, .mk-portadilla {
  position: relative;
  margin: 0 8px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  height: 118px;
}
.mk-cartel__velo, .mk-portadilla__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.94) 8%, rgba(10, 8, 6, 0.15) 62%, transparent);
}
.mk-cartel__texto, .mk-portadilla__texto {
  position: absolute;
  left: 8px; right: 8px; bottom: 7px;
  color: #fff;
}
.mk-cartel__texto b, .mk-portadilla__texto b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.02;
}
.mk-cartel__texto i {
  display: block;
  font-style: normal;
  font-family: var(--dato);
  font-size: 9px;
  font-weight: 600;
  color: var(--ambar-claro);
  margin-top: 2px;
}
.mk-cartel__texto em {
  display: block;
  font-style: normal;
  font-family: var(--dato);
  font-size: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar-claro);
  margin-bottom: 2px;
}
.mk-portadilla__texto i {
  display: block;
  font-style: normal;
  font-family: var(--dato);
  font-size: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar-claro);
  margin-bottom: 2px;
}

/* Riel de carteles */
.mk-riel-titulo { font-family: var(--display); font-size: 12px; padding: 0 8px; }
.mk-riel { display: flex; gap: 5px; padding: 0 8px; }
.mk-poster {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  overflow: hidden;
}
.mk-poster__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.94) 10%, transparent 66%);
}
.mk-poster__pie { position: absolute; left: 4px; right: 4px; bottom: 4px; color: #fff; }
.mk-poster__pie b { display: block; font-size: 7px; line-height: 1.15; }
.mk-poster__pie i { font-style: normal; font-family: var(--dato); font-size: 6px; color: var(--ambar-claro); }

/* Hoja de revista */
.mk-hoja { padding: 0 10px; display: grid; gap: 6px; }
.mk-renglon-hoja { display: flex; align-items: baseline; gap: 4px; }
.mk-renglon-hoja b { font-family: var(--display); font-weight: 400; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.mk-guia { flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.35; transform: translateY(-2px); }
.mk-renglon-hoja i { font-style: normal; font-family: var(--dato); font-size: 9px; font-weight: 600; color: var(--brasa); }

/* Pasarela de la baraja */
.mk-pasarela { display: flex; align-items: center; gap: 5px; padding: 4px 4px 0; }
.mk-lado {
  flex: 0 0 22px;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.45;
  filter: saturate(0.7);
}
.mk-tarjeton {
  position: relative;
  flex: 1;
  height: 176px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(23, 19, 16, 0.28);
}
.mk-controles { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; }
.mk-controles span {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--linea-viva);
  background: #fff;
}
.mk-controles .grande { width: 22px; height: 22px; border: 0; }

/* Lista */
.mk-lista { padding: 0 8px; display: grid; gap: 5px; }
.mk-lista__titulo { font-family: var(--display); font-size: 13px; }
.mk-renglon { display: flex; gap: 6px; align-items: center; }
.mk-renglon img { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px; }
.mk-renglon b { display: block; font-size: 8px; line-height: 1.15; }
.mk-renglon em {
  display: block;
  font-style: normal;
  font-size: 6px;
  opacity: 0.55;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mk-renglon i { font-style: normal; font-family: var(--dato); font-size: 7px; font-weight: 600; color: var(--brasa); }